【小程序】使用uni-app搭建小程序环境之框架
<p>开发目录为：</p><pre data-lang=""> <code class="lang-">
┌─pages
│├─index
││└─index.vue
│└─login
│ └─login.vue
├─static
├─main.js
├─App.vue
├─manifest.json//文件是应用的配置文件，用于指定应用的名称、图标、权限等
└─pages.json //文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等</code></pre>
<table>
<thead>
<tr><th>属性</th><th>类型</th><th>必填</th><th>描述</th><th>平台兼容</th></tr>
</thead>
<tbody>
<tr>
<td>globalStyle</td>
<td>Object</td>
<td>否</td>
<td>设置默认页面的窗口表现</td>
<td> </td>
</tr>
<tr>
<td>pages</td>
<td>Object Array</td>
<td>是</td>
<td>设置页面路径及窗口表现</td>
<td> </td>
</tr>
<tr>
<td>tabBar</td>
<td>Object</td>
<td>否</td>
<td>设置底部 tab 的表现</td>
<td> </td>
</tr>
<tr>
<td>condition</td>
<td>Object</td>
<td>否</td>
<td>启动模式配置</td>
<td> </td>
</tr>
<tr>
<td>subPackages</td>
<td>Object Array</td>
<td>否</td>
<td>分包加载配置</td>
<td> </td>
</tr>
<tr>
<td>preloadRule</td>
<td>Object</td>
<td>否</td>
<td>分包预下载规则</td>
<td>微信小程序</td>
</tr>
<tr>
<td>workers</td>
<td>String</td>
<td>否</td>
<td><code>Worker</code> 代码放置的目录</td>
<td>微信小程序</td>
</tr>
</tbody>
</table>
<p id="globalstyle">globalStyle</p>
<p> 用于设置应用的状态栏、导航条、标题、窗口背景色等。</p>
<p> 注意</p>
<ul>
<li style="list-style-type: none">
<ul>
<li>支付宝小程序使用<code>titleImage</code>时必须使用<code>https</code>的图片链接地址，需要真机调试才能看到效果，支付宝开发者工具内无效果</li>
<li><code>globalStyle</code>中设置的<code>titleImage</code>也会覆盖掉<code>pages</code>-><code>style</code>内的设置文字标题</li>
<li>navigationBarTextStyle 在iOS13上可能会错乱，此问题后续版本会修复<br><br><br></li>
</ul>
</li>
</ul>
<p id="pages">pages</p>
<p><code>uni-app</code> 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：</p>
<table>
<thead>
<tr><th>属性</th><th>类型</th><th>默认值</th><th>描述</th></tr>
</thead>
<tbody>
<tr>
<td>path</td>
<td>String</td>
<td> </td>
<td>配置页面路径</td>
</tr>
<tr>
<td>style</td>
<td>Object</td>
<td> </td>
<td>配置页面窗口表现，配置项参考下方 pageStyle</td>
</tr>
</tbody>
</table>
<p>Tips：</p>
<ul>
<li><span style="color: rgba(255, 102, 0, 1)">pages节点的第一项为应用入口页（即首页）</span></li>
<li>应用中新增/减少页面，都需要对 pages 数组进行修改</li>
<li>文件名不需要写后缀，框架会自动寻找路径下的页面资源</li>
</ul>
<p> </p>
<p id="tabbar">tabBar</p>
<p>如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。</p>
<p>Tips</p>
<ul>
<li><span style="color: rgba(255, 102, 0, 1)">当设置 position 为 top 时，将不会显示 icon</span></li>
<li>tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。</li>
<li>tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）</li>
<li>t<span style="color: rgba(255, 102, 0, 1)">abbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。</span></li>
<li>顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。</li>
</ul>
<p> </p>
<h4 id="tips-tabbar">tabbar常见问题</h4>
<ul>
<li>tabbar 的 js api 见接口-界面-tabbar，可实现动态显示隐藏（如弹出层无法覆盖tabbar）、内容修改（如国际化）、item加角标等功能。hello uni-app中也有示例。</li>
<li>tabbar 的 item 点击事件见页面生命周期的onTabItemTap。</li>
<li>代码跳转到tabbar页面，api只能使用uni.switchTab，不能使用uni.navigateTo、uni.redirectTo；使用navigator组件跳转时必须设置open-type="switchTab"</li>
<li>tabbar 在H5端是div模拟的，属于前端屏幕窗口的一部分，如果要使用bottom居底定位方式，应该使用css变量<code>--window-bottom</code>，比如悬浮在tabbar上方10px的按钮，样式如下<code>bottom: calc(var(--window-bottom) + 10px)</code></li>
<li>tabbar 的默认高度，在不同平台不一样。详见</li>
<li>中间带+号的tabbar模板例子，参考。可跨端，但+号不凸起。</li>
<li>如需 tabbar 中间凸起，可自定义tabbar，插件市场有例子，如colorUI等。但注意前端tabbar的性能不如原生tabbar，如果是多页方式，底部tabbar会在切换时闪执行转场动画，如果是单页方式，承载复杂页面内容会有性能问题。插件市场搜索tabbar有不少类似例子。</li>
<li>App端若使用nvue，自定义tabbar，没有性能体验问题。</li>
<li>纯nvue项目（manifest里renderer为native），目前使用pages.json里的tabbar反而影响性能，建议使用前端自己实现单页面的tabbar。后续会解决这个bug。</li>
<li>Android App上弹出键盘顶起tabbar的问题。升级到HBuilderX 2.2后不再存在。</li>
<li>原生的tabbar只有一个且在首页。二级页如需的tab，前端自己实现。</li>
<li>如果是需要先登录、后进入tab页面，不需要把登陆页设为首页，首页仍然是tabbar页，可参考HBuilderX新建uni-app项目时的登陆模板</li>
<li>前端弹出遮罩层挡不住tabbar的问题，跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view或subNVue做弹出和遮罩，可参考这个底部原生图标分享菜单例子</li>
<li>微信小程序模拟器1.02.1904090版有bug，在缩放模拟器页面百分比后，tabbar点击多次后就会卡死。真机无碍，使用时注意。详见</li>
</ul>
<p><code>manifest.json</code> 文件是应用的配置文件，用于指定应用的名称、图标、权限等。</p>
<p><img src="https://img2018.cnblogs.com/blog/880812/201909/880812-20190924105837640-491795901.png" alt=""></p>
<p> </p>
<p> </p>
<p> package.json</p>
<p> 通过在<code>package.json</code>文件中增加<code>uni-app</code>扩展节点，可实现自定义条件编译平台（如钉钉小程序、微信服务号等平台）。</p>
<p>package.json扩展配置用法（拷贝代码记得去掉注释！）：</p>
<pre data-lang="json"><code class="lang-json">{
/**
package.json其它原有配置
*/
"uni-app": {// 扩展配置
"scripts": {
"custom-platform": { //自定义编译平台配置，可通过cli方式调用
"title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
"BROWSER":"",//运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
"env": {//环境变量
"UNI_PLATFORM": ""//基准平台
},
"define": { //自定义条件编译
"CUSTOM-CONST": true //自定义条件编译常量，建议为大写
}
}
}
}<br>
}<br><br></code></pre>
<p>Tips：</p>
<ul>
<li><code>UNI_PLATFORM</code>仅支持填写<code>uni-app</code>默认支持的基准平台，目前仅限如下枚举值：<code>app-plus</code>、<code>h5</code>、<code>mp-weixin</code>、<code>mp-alipay</code>、<code>mp-baidu</code>、<code>mp-toutiao</code>、<code>mp-qq</code></li>
<li><code>BROWSER</code> 仅在<code>UNI_PLATFORM</code>为<code>h5</code>时有效,目前仅限如下枚举值：<code>Chrome</code>、<code>Firefox</code>、<code>IE</code>、<code>Edge</code>、<code>Safari</code>、<code>HBuilderX</code></li>
<li><span style="color: rgba(255, 102, 0, 1)"><code>package.json</code>文件中不允许出现注释，否则扩展配置无效</span></li>
<li><code>vue-cli</code>需更新到最新版，HBuilderX需升级到Alpha 2.1.6+ 版本</li>
</ul>
<h4 id="示例：钉钉小程序"> </h4>
<pre data-lang="json"><code class="lang-json"> </code></pre>
</div>
<div id="MySignature" role="contentinfo">
<div id="AllanboltSignature">
<div>作者：smile.轉角</div>
<div>出处：https://www.cnblogs.com/websmile/</div>
<div>本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.</div>
</div>
<div class="div_masklayer" id="div_masklayer"></div>
<div class="div_popup" id="Div_popup">
<p class="mid">欢迎关注我，一起进步！扫描下方二维码即可加我QQ</p>
<img class="img_zfb" id="img_zfb" src="https://www.cnblogs.com/images/cnblogs_com/websmile/1492407/t_smile%E8%BD%AC%E8%A7%92.jpg">
</div><br><br>
来源：https://www.cnblogs.com/websmile/p/11577484.html
頁:
[1]