【小程序】使用uni-app搭建小程序环境调用
<p>什么是uni-app:</p><p> 官方：<code>uni-app</code> 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。</p>
<p>即使不跨端，<code>uni-app</code>同时也是更好的小程序开发框架。</p>
<p> 白话儿：就是一个可以搭建各个平台的前端框架</p>
<p> 产品特征：通用技术栈</p>
<p> vue的语法</p>
<p> 微信小程序的api</p>
<p> 内嵌mpvue</p>
<p> </p>
<p>搭建环境</p>
<ul>
<li>下载HBuilderX （下载的是App开发版） https://www.dcloud.io/hbuilderx.html</li>
<li>安装微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html</li>
</ul>
<p> </p>
<p>创建项目：</p>
<p> 新建项目：</p>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/blog/880812/201909/880812-20190923152531426-2055926161.png" alt="" width="584" height="457"></p>
<p> </p>
<p> </p>
<p> 配置小程序</p>
<p> 1.在HBuilderX中配置微信开发者工具路径：工具-设置-运行配置</p>
<p> <img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/blog/880812/201909/880812-20190923152944684-210084632.png" alt="" width="891" height="182"></p>
<p> </p>
<p> </p>
<p> </p>
<p> 2.开启微信开发者工具服务器端口设置</p>
<p> <img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/blog/880812/201909/880812-20190923153153694-1672834989.png" alt=""></p>
<p> </p>
<p> </p>
<p> </p>
<p>运行结果：（ctr+r -----微信开发者工具）</p>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/blog/880812/201909/880812-20190923154759358-1900786793.png" alt=""></p>
<p> </p>
<p>框架简介---开发规范：</p>
<ul>
<li>页面文件遵循 Vue 单文件组件 (SFC) 规范</li>
<li>组件标签靠近小程序规范，详见uni-app 组件规范</li>
<li>接口能力（JS API）靠近微信小程序规范，但需将前缀 <code>wx</code> 替换为 <code>uni</code>，详见uni-app接口规范</li>
<li>数据绑定及事件处理同 <code>Vue.js</code> 规范，同时补充了App及页面的生命周期</li>
<li>为兼容多端运行，建议使用flex布局进行开发</li>
</ul>
<p>框架简介---目录结构 </p>
<p> 一个uni-app工程，默认包含如下目录及文件：</p>
<pre data-lang=""> <code class="lang-">
┌─components uni-app组件目录
│└─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录，详见
├─platforms 存放各平台专用页面的目录，详见
├─pages 业务页面文件存放的目录
│├─index
││└─index.vue index页面
│└─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，<strong>注意：</strong>静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录，详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见</code></pre>
<p> 注意事项：</p>
<ul>
<li><span style="color: rgba(255, 102, 0, 1)"><code>static</code> 目录下的 <code>js</code> 文件不会被编译，如果里面有 <code>es6</code> 的代码，不经过转换直接运行，在手机设备上会报错。</span></li>
<li><span style="color: rgba(255, 102, 0, 1)"><code>css</code>、<code>less/scss</code> 等资源同样不要放在 <code>static</code> 目录下，建议这些公用的资源放在 <code>common</code> 目录下。</span></li>
</ul>
<p>框架简介---生命周期</p>
<ul>
<li>应用生命周期<br>
<p><code>uni-app</code> 支持如下应用生命周期函数：</p>
<table>
<thead>
<tr><th>函数名</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>onLaunch</td>
<td>当<code>uni-app</code> 初始化完成时触发（全局只触发一次）</td>
</tr>
<tr>
<td>onShow</td>
<td>当 <code>uni-app</code> 启动，或从后台进入前台显示</td>
</tr>
<tr>
<td>onHide</td>
<td>当 <code>uni-app</code> 从前台进入后台</td>
</tr>
<tr>
<td>onUniNViewMessage</td>
<td>对 <code>nvue</code> 页面发送的数据进行监听，可参考 nvue 向 vue 通讯</td>
</tr>
</tbody>
</table>
<br>
<p>注意</p>
<ul>
<li>应用生命周期仅可在<code>App.vue</code>中监听，在其它页面监听无效。</li>
<li>onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942</li>
</ul>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/blog/880812/201909/880812-20190923162342542-776443803.png" alt=""></p>
<p> </p>
<p> </p>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/blog/880812/201909/880812-20190923162410538-353135271.png" alt="" width="862" height="320"></p>
<p>
</p>
</li>
</ul>
<p> 路由环境</p>
<ul>
<li>路由跳转<br><code> uni-app</code>路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式，<span style="color: rgba(255, 102, 0, 1)"><strong>不支持 <code>Vue Router</code>。</strong></span><br><code> <code>uni-app</code> 有两种路由跳转方式：使用navigator组件跳转、调用API跳转。</code> </li>
</ul>
<p> </p>
<p> </p>
<p>相关资料：</p>
<ul>
<li>uni-app官网</li>
<li>微信小程序开发文档</li>
<li>白话uni-app 【也是html、vue、小程序的区别】</li>
<li>腾讯学习课程（nui-app 快速入门）</li>
<li>使用uni-app创建多端使用的小程序与H5经验总结</li>
<li>uni-app如何创建并运行微信小程序项目</li>
</ul>
<p> </p>
</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/11576312.html
頁:
[1]