首页 › 公众号/小程序论坛 › 微信小程序开发环境安装以及相关设置配置

莎士比亚的故事 發表於 2019-9-23 19:16:00

微信小程序开发环境安装以及相关设置配置

<h1 id="微信小程序开发环境安装以及相关设置配置">微信小程序开发环境安装以及相关设置配置</h1>
<h2 id="一安装">一.安装</h2>
<p>软件名称:<code>wechat_devtools_1.02.1907232_x64</code></p>
<p>软件安装地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html</p>
<p>使用官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/</p>
<h2 id="二小程序项目创建以及设置">二.小程序项目创建以及设置</h2>
<p>点创建项目时候其中appid是唯一的需要去自己小程序账号上查找</p>
<p>下面选项一般<code>不使用云服务</code></p>
<p>其中相关设置点击<code>设置</code>或者右上角详情可以点出相关设置</p>
<p>其中本地测试需要在右上角<code>详情</code>→<code>本地设置</code>→<code>不校验合法域名进行勾选</code></p>
<h2 id="三目录结构">三.目录结构</h2>
<p>一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：</p>
<table>
<thead>
<tr>
<th style="text-align: left">文件</th>
<th style="text-align: left">必需</th>
<th style="text-align: left">作用</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">app.js</td>
<td style="text-align: left">是</td>
<td style="text-align: left">小程序逻辑</td>
</tr>
<tr>
<td style="text-align: left">app.json</td>
<td style="text-align: left">是</td>
<td style="text-align: left">小程序公共配置</td>
</tr>
<tr>
<td style="text-align: left">app.wxss</td>
<td style="text-align: left">否</td>
<td style="text-align: left">小程序公共样式表</td>
</tr>
</tbody>
</table>
<p>一个小程序页面由四个文件组成，分别是：</p>
<table>
<thead>
<tr>
<th style="text-align: left">文件类型</th>
<th style="text-align: left">必需</th>
<th style="text-align: left">作用</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">js</td>
<td style="text-align: left">是</td>
<td style="text-align: left">页面逻辑</td>
</tr>
<tr>
<td style="text-align: left">wxml</td>
<td style="text-align: left">是</td>
<td style="text-align: left">页面结构</td>
</tr>
<tr>
<td style="text-align: left">json</td>
<td style="text-align: left">否</td>
<td style="text-align: left">页面配置</td>
</tr>
<tr>
<td style="text-align: left">wxss</td>
<td style="text-align: left">否</td>
<td style="text-align: left">页面样式表</td>
</tr>
</tbody>
</table>
<p><strong>注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。</strong></p>
<h2 id="四常用配置">四.常用配置</h2>
<h3 id="一配置项">一.配置项</h3>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">描述</th>
<th style="text-align: left">最低版本</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">pages</td>
<td style="text-align: left">string[]</td>
<td style="text-align: left">是</td>
<td style="text-align: left">页面路径列表</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">window</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">否</td>
<td style="text-align: left">全局的默认窗口表现</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">tabBar</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">否</td>
<td style="text-align: left">底部 <code>tab</code> 栏的表现</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">networkTimeout</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">否</td>
<td style="text-align: left">网络超时时间</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">debug</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">否</td>
<td style="text-align: left">是否开启 debug 模式，默认关闭</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">functionalPages</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">否</td>
<td style="text-align: left">是否启用插件功能页，默认关闭</td>
<td style="text-align: left">2.1.0</td>
</tr>
<tr>
<td style="text-align: left">subpackages</td>
<td style="text-align: left">Object[]</td>
<td style="text-align: left">否</td>
<td style="text-align: left">分包结构配置</td>
<td style="text-align: left">1.7.3</td>
</tr>
<tr>
<td style="text-align: left">workers</td>
<td style="text-align: left">string</td>
<td style="text-align: left">否</td>
<td style="text-align: left"><code>Worker</code> 代码放置的目录</td>
<td style="text-align: left">1.9.90</td>
</tr>
<tr>
<td style="text-align: left">requiredBackgroundModes</td>
<td style="text-align: left">string[]</td>
<td style="text-align: left">否</td>
<td style="text-align: left">需要在后台使用的能力，如「音乐播放」</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">plugins</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">否</td>
<td style="text-align: left">使用到的插件</td>
<td style="text-align: left">1.9.6</td>
</tr>
<tr>
<td style="text-align: left">preloadRule</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">否</td>
<td style="text-align: left">分包预下载规则</td>
<td style="text-align: left">2.3.0</td>
</tr>
<tr>
<td style="text-align: left">resizable</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">否</td>
<td style="text-align: left">iPad 小程序是否支持屏幕旋转，默认关闭</td>
<td style="text-align: left">2.3.0</td>
</tr>
<tr>
<td style="text-align: left">navigateToMiniProgramAppIdList</td>
<td style="text-align: left">string[]</td>
<td style="text-align: left">否</td>
<td style="text-align: left">需要跳转的小程序列表，详见 wx.navigateToMiniProgram</td>
<td style="text-align: left">2.4.0</td>
</tr>
<tr>
<td style="text-align: left">usingComponents</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">否</td>
<td style="text-align: left">全局自定义组件配置</td>
<td style="text-align: left">开发者工具 1.02.1810190</td>
</tr>
<tr>
<td style="text-align: left">permission</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">否</td>
<td style="text-align: left">小程序接口权限相关设置</td>
<td style="text-align: left">微信客户端 7.0.0</td>
</tr>
<tr>
<td style="text-align: left">sitemapLocation</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">指明 sitemap.json 的位置</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">style</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">指定使用升级后的weui样式</td>
<td style="text-align: left"></td>
</tr>
</tbody>
</table>
<h3 id="二全局样式设置">二.全局样式设置</h3>
<p>app.json文件中window文件中</p>
<pre><code class="language-python">"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#250",
    "navigationBarTitleText": "YWY",
    "navigationBarTextStyle": "black"
},
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">描述</th>
<th style="text-align: left">最低版本</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">navigationBarBackgroundColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">#000000</td>
<td style="text-align: left">导航栏背景颜色，如 <code>#000000</code></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">navigationBarTextStyle</td>
<td style="text-align: left">string</td>
<td style="text-align: left">white</td>
<td style="text-align: left">导航栏标题颜色，仅支持 <code>black</code> / <code>white</code></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">navigationBarTitleText</td>
<td style="text-align: left">string</td>
<td style="text-align: left"></td>
<td style="text-align: left">导航栏标题文字内容</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">navigationStyle</td>
<td style="text-align: left">string</td>
<td style="text-align: left">default</td>
<td style="text-align: left">导航栏样式，仅支持以下值： <code>default</code> 默认样式 <code>custom</code> 自定义导航栏，只保留右上角胶囊按钮。参见注 2。</td>
<td style="text-align: left">微信客户端 6.6.0</td>
</tr>
<tr>
<td style="text-align: left">backgroundColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">#ffffff</td>
<td style="text-align: left">窗口的背景色</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">backgroundTextStyle</td>
<td style="text-align: left">string</td>
<td style="text-align: left">dark</td>
<td style="text-align: left">下拉 loading 的样式，仅支持 <code>dark</code> / <code>light</code></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">backgroundColorTop</td>
<td style="text-align: left">string</td>
<td style="text-align: left">#ffffff</td>
<td style="text-align: left">顶部窗口的背景色，仅 iOS 支持</td>
<td style="text-align: left">微信客户端 6.5.16</td>
</tr>
<tr>
<td style="text-align: left">backgroundColorBottom</td>
<td style="text-align: left">string</td>
<td style="text-align: left">#ffffff</td>
<td style="text-align: left">底部窗口的背景色，仅 iOS 支持</td>
<td style="text-align: left">微信客户端 6.5.16</td>
</tr>
<tr>
<td style="text-align: left">enablePullDownRefresh</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">是否开启全局的下拉刷新。 详见 Page.onPullDownRefresh</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">onReachBottomDistance</td>
<td style="text-align: left">number</td>
<td style="text-align: left">50</td>
<td style="text-align: left">页面上拉触底事件触发时距页面底部距离，单位为 px。 详见 Page.onReachBottom</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">pageOrientation</td>
<td style="text-align: left">string</td>
<td style="text-align: left">portrait</td>
<td style="text-align: left">屏幕旋转设置，支持 <code>auto</code>/ <code>portrait</code> / <code>landscape</code>详见 响应显示区域变化</td>
<td style="text-align: left">2.4.0 (auto) / 2.5.0(landscape)</td>
</tr>
</tbody>
</table>
<ul>
<li>注 1：HexColor（十六进制颜色值），如"#ff00ff"</li>
<li>注 2：关于<code>navigationStyle</code></li>
</ul>
<p><img src="https://res.wx.qq.com/wxdoc/dist/assets/img/config.344358b1.jpg" alt="" loading="lazy"></p>
<h3 id="三页面路由设置">三.页面路由设置</h3>
<pre><code class="language-python">"pages": [
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
],
</code></pre>
<p>注意点:</p>
<p><code>谁在最前面谁当首页显示</code></p>
<p>最后结尾不能有<code>,</code></p>
<h3 id="四底部导航栏">四.底部导航栏</h3>
<pre><code class="language-python">"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "",
      "selectedIconPath": ""
    },
    {
      "pagePath": "pages/test/test",
      "text": "测试",
      "iconPath": "",
      "selectedIconPath": ""
    }]
}
</code></pre>
<p>里面用数组套对象的形式,而且<strong>只能配置最少 2 个、最多 5 个 tab</strong>。</p>
<p>属性</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">描述</th>
<th style="text-align: left">最低版本</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">color</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 上的文字默认颜色，仅支持十六进制颜色</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">selectedColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 上的文字选中时的颜色，仅支持十六进制颜色</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">backgroundColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 的背景色，仅支持十六进制颜色</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">borderStyle</td>
<td style="text-align: left">string</td>
<td style="text-align: left">否</td>
<td style="text-align: left">black</td>
<td style="text-align: left">tabbar 上边框的颜色， 仅支持 <code>black</code> / <code>white</code></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">list</td>
<td style="text-align: left">Array</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 的列表，详见 <code>list</code> 属性说明，最少 2 个、最多 5 个 tab</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">position</td>
<td style="text-align: left">string</td>
<td style="text-align: left">否</td>
<td style="text-align: left">bottom</td>
<td style="text-align: left">tabBar 的位置，仅支持 <code>bottom</code>/ <code>top</code></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">custom</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">否</td>
<td style="text-align: left">false</td>
<td style="text-align: left">自定义 tabBar，见详情</td>
<td style="text-align: left">2.5.0</td>
</tr>
</tbody>
</table>
<p>其属性值如下：</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">pagePath</td>
<td style="text-align: left">string</td>
<td style="text-align: left">是</td>
<td style="text-align: left">页面路径，必须在 pages 中先定义</td>
</tr>
<tr>
<td style="text-align: left">text</td>
<td style="text-align: left">string</td>
<td style="text-align: left">是</td>
<td style="text-align: left">tab 上按钮文字</td>
</tr>
<tr>
<td style="text-align: left">iconPath</td>
<td style="text-align: left">string</td>
<td style="text-align: left">否</td>
<td style="text-align: left">图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 <strong>当 position 为 top 时，不显示 icon。</strong></td>
</tr>
<tr>
<td style="text-align: left">selectedIconPath</td>
<td style="text-align: left">string</td>
<td style="text-align: left">否</td>
<td style="text-align: left">选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 <strong>当 position 为 top 时，不显示 icon。</strong></td>
</tr>
</tbody>
</table>
<p>​</p>
<p><img src="https://res.wx.qq.com/wxdoc/dist/assets/img/tabbar.ce1b3c5b.png" alt="" loading="lazy"></p>
<h3 id="五其他配置">五.其他配置</h3>
<p>https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#%E9%85%8D%E7%BD%AE%E9%A1%B9</p><br><br>
来源：https://www.cnblogs.com/pythonywy/p/11574170.html

查看完整版本: 微信小程序开发环境安装以及相关设置配置