💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
# 微信小程序配置文件介绍 ### 小程序配置 app.json `app.json`是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。 ### 工具配置 project.config.json 通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。 考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个`project.config.json`,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项 ### 页面配置 page.json 这里的`page.json`其实用来表示 pages/logs 目录下的`logs.json`这类和小程序页面相关的配置。 如果你整个小程序的风格是蓝色调,那么你可以在`app.json`里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块,因此我们提供了`page.json`,让开发者可以独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等 ## 全局配置 小程序根目录下的`app.json`文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 ## 使用 Page 构造器注册页面 简单的页面可以使用`Page()`进行构造。 **代码示例:** ``` <pre class="calibre14">``` <span class="token6">//index.js</span> <span class="token3">Page</span><span class="token1">(</span><span class="token1">{</span> data<span class="token1">:</span> <span class="token1">{</span> text<span class="token1">:</span> <span class="token4">"This is page data."</span> <span class="token1">}</span><span class="token1">,</span> onLoad<span class="token1">:</span> <span class="token2">function</span><span class="token1">(</span>options<span class="token1">)</span> <span class="token1">{</span> <span class="token6">// 页面创建时执行</span> <span class="token1">}</span><span class="token1">,</span> onShow<span class="token1">:</span> <span class="token2">function</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token6">// 页面出现在前台时执行</span> <span class="token1">}</span><span class="token1">,</span> onReady<span class="token1">:</span> <span class="token2">function</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token6">// 页面首次渲染完毕时执行</span> <span class="token1">}</span><span class="token1">,</span> onHide<span class="token1">:</span> <span class="token2">function</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token6">// 页面从前台变为后台时执行</span> <span class="token1">}</span><span class="token1">,</span> onUnload<span class="token1">:</span> <span class="token2">function</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token6">// 页面销毁时执行</span> <span class="token1">}</span><span class="token1">,</span> onPullDownRefresh<span class="token1">:</span> <span class="token2">function</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token6">// 触发下拉刷新时执行</span> <span class="token1">}</span><span class="token1">,</span> onReachBottom<span class="token1">:</span> <span class="token2">function</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token6">// 页面触底时执行</span> <span class="token1">}</span><span class="token1">,</span> onShareAppMessage<span class="token1">:</span> <span class="token2">function</span> <span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token6">// 页面被用户分享时执行</span> <span class="token1">}</span><span class="token1">,</span> onPageScroll<span class="token1">:</span> <span class="token2">function</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token6">// 页面滚动时执行</span> <span class="token1">}</span><span class="token1">,</span> onResize<span class="token1">:</span> <span class="token2">function</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token6">// 页面尺寸变化时执行</span> <span class="token1">}</span><span class="token1">,</span> <span class="token3">onTabItemTap</span><span class="token1">(</span>item<span class="token1">)</span> <span class="token1">{</span> <span class="token6">// tab 点击时执行</span> console<span class="token1">.</span><span class="token3">log</span><span class="token1">(</span>item<span class="token1">.</span>index<span class="token1">)</span> console<span class="token1">.</span><span class="token3">log</span><span class="token1">(</span>item<span class="token1">.</span>pagePath<span class="token1">)</span> console<span class="token1">.</span><span class="token3">log</span><span class="token1">(</span>item<span class="token1">.</span>text<span class="token1">)</span> <span class="token1">}</span><span class="token1">,</span> <span class="token6">// 事件响应函数</span> viewTap<span class="token1">:</span> <span class="token2">function</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span><span class="token3">setData</span><span class="token1">(</span><span class="token1">{</span> text<span class="token1">:</span> <span class="token4">'Set some data for updating view.'</span> <span class="token1">}</span><span class="token1">,</span> <span class="token2">function</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token6">// this is setData callback</span> <span class="token1">}</span><span class="token1">)</span> <span class="token1">}</span><span class="token1">,</span> <span class="token6">// 自由数据</span> customData<span class="token1">:</span> <span class="token1">{</span> hi<span class="token1">:</span> <span class="token4">'MINA'</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">)</span> ``` ```