uni-app 小程序从零开始的开发流程

年华似丶流水 發表於 2021-9-3 17:50:00

<h2 class="md-end-block md-heading">前言</h2>
本文基于 HBuilderX 3.1.22 + 微信开发者工具 1.05.2106300为主要内容进行说明。 
文档版本：1.0.2
更新时间：2021-09-04 16:42; 2021-10-22 13:46;
<h2 class="md-end-block md-heading">一、准备</h2>
 <code>uni-app</code> 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。 
<h3 class="md-end-block md-heading">1.1 软件安装</h3>
 创建uni-app有两种，一个是通过 HBuilderX 可视化界面，另一个是通过vue-cli命令行。本文档以HbuilderX为创建说明，以微信开发者工具进行运行项目和代码说明。
 HbuilderX 下载地址：https://www.dcloud.io/hbuilderx.html
 HbuilderX 文档地址：https://hx.dcloud.net.cn/Tutorial/startup
 微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
 HbuilderX安装结束后，一般需要下载开发项目需要的插件，选择工具-->插件安装-->安装或去市场插件查找下载，然后放到目录下的uni_modules文件夹（安装时候自动生成），如scss/sass编译，App真机运行等。
 微信开发者工具安装结束后，在工具栏上选择 设置-->通用设置-->安全-->打开服务端口。
 其次，在微信开发者平台(https://open.weixin.qq.com/)注册开发者账号，找到自己的开发ID，AppId，并记录好，为项目从HbuilderX运行到微信开发者工具做准备。
然后，在微信公众平台(https://mp.weixin.qq.com/)注册对应的账号，比如本次注册的是小程序，则微信开发者APPID如下图中找到：
<img src="https://img2020.cnblogs.com/blog/1338464/202110/1338464-20211022133401969-1151715600.png">
 接着配置微信开发者工具的AppId，在微信开发者工具界面点击右上角详情->基本信息->AppId进行配置，如下图：
<img src="https://img2020.cnblogs.com/blog/1338464/202110/1338464-20211022133617360-1602211702.jpg">
开发环境下配置：点击右上角详情->本地设置->打钩"不校验合法域名...."，如下图：
<img src="https://img2020.cnblogs.com/blog/1338464/202110/1338464-20211022133709590-1415289297.jpg">
<h3 class="md-end-block md-heading">1.2 vue入门</h3>
 由于uni-app是以vue为基础的小程序开发，所以使用uni-app之前需要对vue有一定的了解。
 vue 文档地址：https://vuejs.bootcss.com/guide/
<h2 class="md-end-block md-heading">二、基于HbuilderX 的uni-app项目搭建</h2>
<h3 class="md-end-block md-heading">2.1 创建项目</h3>
1.在点击工具栏里的文件 -> 新建 -> 项目：
<img src="https://img2020.cnblogs.com/blog/1338464/202109/1338464-20210903173444781-633118041.png">
2.选择<code>uni-app</code>类型，输入工程名，选择模板，点击创建，即可成功创建。
<img src="https://img2020.cnblogs.com/blog/1338464/202109/1338464-20210903173455177-1575878714.png">
 uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发可以参考该模板，毕竟这个模板已内置大量常用组件。
 然后在HBuilder X内工具栏点击 运行—>运行到小程序模拟器 -->微信开发者工具，便能初步看到运行成效。
<h3 class="md-end-block md-heading">2.2 目录补充搭建</h3>
 本次创建使用默认版本，创建后的目录如下：
<img src="https://img2020.cnblogs.com/blog/1338464/202109/1338464-20210903173507361-448013673.png">
1 根据需要给项目搭建相应的目录结构。尚未下载依赖和市场插件之前，创建需要的文件夹和文件：
<img src="https://img2020.cnblogs.com/blog/1338464/202109/1338464-20210903173519133-1574410192.png">
2 如果要下载vue，vuex等依赖，在之前需要先安装node.js，并且安装好node的包管理器（npm,cnpm,yarn等，一个即可，本文档以npm为例）
 node相关地址：http://nodejs.cn/
 安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html
 A. 初始化package.json文件
<img src="https://img2020.cnblogs.com/blog/1338464/202109/1338464-20210903173537181-784420698.png">
 B.使用代码，其中注意最好加上--save
<div class="cnblogs_code">
<pre>　　npm install vue --save 　　npm install vuex --save
　　npm install uview-ui --save</pre>
</div>
下载vue和uview依赖。其中，vue是开发uni-app必要的依赖，uview则是uni-app生态的一个优秀的UI框架，本文档以uview作为前端UI开发框架为基础进行开发搭建。执行下载后，项目会自动把依赖放进node_modules文件夹内，可在node_modules文件夹进行查看。然后下载开发项目需要的市场插件，市场插件默认自行创建插件所在文件夹uni_modules，并存放插件于此。
 vue相关地址：https://vuejs.bootcss.com/guide/
vuex相关地址：https://vuex.vuejs.org/zh/installation.html
 uview相关地址：https://www.uviewui.com/components/intro.html
<img src="https://img2020.cnblogs.com/blog/1338464/202109/1338464-20210903173551328-560580420.png">
 最后，创建页面和对应页面的api文件（本文档仅以登录页面、主页面和登录api文件为例），这样一个基本的结构接搭建好了，最终结构目录大体如下：
<img src="https://img2020.cnblogs.com/blog/1338464/202109/1338464-20210903173605859-680961387.png">
 其中.hbuilderx，unpackage文件夹是自动生成，不必自主创建。node_modules，uni_modules文件夹里的文件最好不必去改动。
 C.目录结构说明如下：
<table class="md-table">
<thead>
<tr class="md-end-block"><th>层级1</th><th>层级2</th><th>层级3</th><th>描述</th></tr>
</thead>
<tbody>
<tr class="md-end-block">
<td>api</td>
<td> </td>
<td> </td>
<td>各个模块接口文件夹</td>
</tr>
<tr class="md-end-block">
<td> </td>
<td>login.js</td>
<td> </td>
<td>登录模块接口文件</td>
</tr>
<tr class="md-end-block">
<td>common</td>
<td> </td>
<td> </td>
<td>公共模块，包含公共基础css等</td>
</tr>
<tr class="md-end-block">
<td> </td>
<td>base.css</td>
<td> </td>
<td>公共基础css</td>
</tr>
<tr class="md-end-block">
<td>components</td>
<td> </td>
<td> </td>
<td>符合vue组件规范的uni-app组件目录</td>
</tr>
<tr class="md-end-block">
<td>node_modules</td>
<td> </td>
<td> </td>
<td>nodejs相关依赖包文件目录</td>
</tr>
<tr class="md-end-block">
<td>pages</td>
<td> </td>
<td> </td>
<td>业务页面文件存放的目录</td>
</tr>
<tr class="md-end-block">
<td> </td>
<td>index</td>
<td> </td>
<td>index文件夹</td>
</tr>
<tr class="md-end-block">
<td> </td>
<td> </td>
<td>index.vue</td>
<td>主页面</td>
</tr>
<tr class="md-end-block">
<td> </td>
<td>login</td>
<td> </td>
<td>login文件夹</td>
</tr>
<tr class="md-end-block">
<td> </td>
<td> </td>
<td>index.vue</td>
<td>登录主页面</td>
</tr>
<tr class="md-end-block">
<td>static</td>
<td> </td>
<td> </td>
<td>存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此，不要放css文件</td>
</tr>
<tr class="md-end-block">
<td>store</td>
<td> </td>
<td> </td>
<td>vuex目录，也是存放公共属性方法的地方</td>
</tr>
<tr class="md-end-block">
<td> </td>
<td>index.js</td>
<td> </td>
<td>vuex的主文件</td>
</tr>
<tr class="md-end-block">
<td>uni_modules</td>
<td> </td>
<td> </td>
<td>插件市场下载的第三方UI组件目录，存放uni_module规范的插件。</td>
</tr>
<tr class="md-end-block">
<td>unpackage</td>
<td> </td>
<td> </td>
<td>打包目录，这里有各个平台的打包文件。</td>
</tr>
<tr class="md-end-block">
<td>utils</td>
<td> </td>
<td> </td>
<td>全局公共方法目录</td>
</tr>
<tr class="md-end-block">
<td> </td>
<td>common.js</td>
<td> </td>
<td>封装的公共可复用的方法属性文件（针对当前项目）</td>
</tr>
<tr class="md-end-block">
<td> </td>
<td>request.js</td>
<td> </td>
<td>封装的公共请求方法文件</td>
</tr>
<tr class="md-end-block">
<td> </td>
<td>utils.js</td>
<td> </td>
<td>封装的公共可复用的方法属性文件（针对所有项目）</td>
</tr>
<tr class="md-end-block">
<td>App.vue</td>
<td> </td>
<td> </td>
<td>应用配置文件，用来配置App全局样式以及监听应用生命周期</td>
</tr>
<tr class="md-end-block">
<td>main.js</td>
<td> </td>
<td> </td>
<td>Vue初始化入口文件</td>
</tr>
<tr class="md-end-block">
<td>manifest.json</td>
<td> </td>
<td> </td>
<td>配置应用名称、appid、logo、版本等打包信息的文件</td>
</tr>
<tr class="md-end-block">
<td>package.json</td>
<td> </td>
<td> </td>
<td>项目配置信息文件，依赖模块的定义</td>
</tr>
<tr class="md-end-block">
<td>package-lock.json</td>
<td> </td>
<td> </td>
<td>
1.锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
 2.加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,重新安装时只需下载即可，不需要做额外的工作
</td>
</tr>
<tr class="md-end-block">
<td>pages.json</td>
<td> </td>
<td> </td>
<td>配置页面路由、导航条、选项卡等页面类信息的文件</td>
</tr>
<tr class="md-end-block">
<td>uni.scss</td>
<td> </td>
<td> </td>
<td>自带的公共的css修饰文件</td>
</tr>
<tr class="md-end-block">
<td>README.md</td>
<td> </td>
<td> </td>
<td>文档说明，可包含目录文件名称对比，注意事项，框架使用，技术架构，Git或SVN地址，账号密码等</td>
</tr>
</tbody>
</table>
 由于在pages创建了登录页面，所以需要到pages.json去配置相关路径。
<h4 class="md-end-block md-heading">pages.json</h4>
<div class="cnblogs_code">
<pre> "pages": [
 {
 "path": "pages/login/index",
 "style": {
 "navigationBarTitleText": "登录"
 }
 },
 {
 "path": "pages/index/index",
 "style": {
 "navigationBarTitleText": "首页"
 }
 }
]</pre>
</div>

<ul class="ul-list" data-mark="-">
<li class="md-list-item">
编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。
</li>
<li class="md-list-item">
非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
</li>
<li class="md-list-item">
css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。
</li>
</ul>
<h3 class="md-end-block md-heading">2.3 搭建目录文件代码</h3>
 根据需要，我们写一个简单的登录，使用登录功能来阐述各个目录文件之间的联系。
 首先，我们先把已创建的相关文件进行挂载到全局，即在main.js或者App.vue写相关代码：
<h4>main.js</h4>
<img src="https://img2020.cnblogs.com/blog/1338464/202109/1338464-20210903173942477-1617537019.png">
<h4 class="md-end-block md-heading">App.vue</h4>
<img src="https://img2020.cnblogs.com/blog/1338464/202109/1338464-20210903173953567-810041919.png">
 然后在被引入的文件写必要的内容信息：
<h4 class="md-end-block md-heading">base.css</h4>
<div class="cnblogs_code">
<pre>　　.clearfix:before{content:" ";display:table}
　　.clearfix:after{content:" ";display:table;clear:both}
　　.fl{float:left}
　　.fr{float:right}</pre>
</div>
<h4 class="md-end-block md-heading">request.js</h4>
<div class="cnblogs_code">
<pre>export default function request({
url,
method = "GET",
params = {},
header,
loadding = false,
loaddingText = "加载中..."
}) {
return new Promise((resolve, reject) => {

 if (loadding) {
 uni.showLoading({
 title: loaddingText
 })
 }
 setTimeout(() => {
 uni.request({
 url,
 method,
 data: params,
 header,
 success: (res) => {
 if (res) {
 resolve(res.data)
 } else {
 resolve(res)
 }
 if (loadding) {
 uni.hideLoading()
 }
 },
 fail: (res) => {
 reject(res)
 }
 })
 }, 1000)
}).catch(err => {
 // 这里既可以捕获throw的异常也可以捕获reject的异常
 console.log(":", err)
 if (loadding) {
 uni.hideLoading()
 } 　　　　　return Promise.reject(err)
})
}</pre>
</div>
<h4 class="md-end-block md-heading">common.js</h4>
<div class="cnblogs_code">
<pre>export default {
BASE_URL:""
}</pre>
</div>
 然后我们开始写登录页面。登录页面需要写用户名、密码、登录按钮三个组件，则需要使用uview创建。使用uview创建组件之前的几个确保：
 确保1 <code>HBuilder X</code> 是安装了 <code>scss/sass</code> 编译插件 
<img src="https://img2020.cnblogs.com/blog/1338464/202109/1338464-20210903174300698-1257547902.png">
 确保2 在根目录下 <code>uni.scss</code> 文件中引入 <code>uview-ui/theme.scss</code>
<div class="cnblogs_code">
<pre>@import 'uview-ui/theme.scss';</pre>
</div>
 确保3 在根目录下 <code>App.vue</code> 文件中的style代码块添加 <code>lang="scss"</code>属性和引入 <code>uview-ui/index.scss</code>
<div class="cnblogs_code">
<pre><style lang="scss">
@import "uview-ui/index.scss";
</style></pre>
</div>
 确保4 在根目录下<code>main.js</code>文件中引入并使用uView的JS库，注意这两行要放在<code>import Vue</code>之后。 
<div class="cnblogs_code">
<pre>import uView from "uview-ui";
Vue.use(uView);</pre>
</div>
 如果是不想书写引入文件代码，即我们每当引入一个UI组件，就需要添加
<div class="cnblogs_code">
<pre>import xxx from "uView-ui/components/u-xxx/u-xxx.vue";</pre>
</div>
等相关代码。则需要确保5 在根目录下pages.json文件中，配置easycom组件模式
<div class="cnblogs_code">
<pre>// pages.json
{
"easycom": {
 "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},

// 此为本身已有的内容
"pages": [
 // ......
 ]
}</pre>
</div>
 接着我们在pages/login/index.vue，即登录页面中，引入uview组件和书写登录代码：
<h4 class="md-end-block md-heading">pages/login/index.vue</h4>
<div class="cnblogs_code">
<pre><template>
<view class="content">
 <view class="inp">
 <u-input v-model="username" type="text" :border="true" placeholder="请输入用户名" />
 </view>
 <view class="inp">
 <u-input v-model="password" type="password" :border="true" placeholder="请输入密码" />
 </view>
 <view class="inp">
 <u-button type="primary" shape="circle" style="margin-top: 40rpx;" @click="onLogin">登录</u-button>
 </view>
</view>
</template>

<script>
import {
 login
} from '@/api/login.js'
export default {
 data() {
 return {
 username: '',
 password: ''
 }
 },
 onLoad() {

 },
 methods: {
 onLogin() {
 // #ifdef MP-WEIXIN
 uni.login({
 success: res0 => {
 login({
 params: {
 username: this.username,
 password: this.password,
 code: res0.code
 },
 loadding: true,
 loaddingText: "登录中..."
 }).then(res => {
 this.$store.state.userinfo = res
 if (res) {
 uni.reLaunch({
 url: "../index/index"
 })
 } else {
 uni.showToast({
 title: "登录失败",
 duration: 1000,
 icon: "none"
 })
 }
 })
 },
 fail: err => {
 console.log("fail:", err)
 }
 })
 // #endif
 // #ifdefH5
 uni.reLaunch({
 url: "../index/index"
 })
 // #endif
 }
 }
}
</script>

<style scoped lang="scss">
.content {
 padding: 20px;

 .inp {
 margin: 10px;
 }
}
</style></pre>
</div>
 以上代码为先进行获取用户登录凭证code，然后才正式登录。因为开发者需要在开发者服务器后台，使用 code 换取 openid 和 session_key 等信息。然后使用得到的code，和用户名密码一起作为参数进行真正的登录请求。其中，样式最好内聚在组件内，组件内部使用的样式，尽量在<code>style</code>中添加<code>scoped</code>，编译时会增加组件<code>hash</code>前缀来防止样式污染。
 login页面 有请求数据，则需要写login.js请求接口：
<h4 class="md-end-block md-heading">login.js</h4>
<div class="cnblogs_code">
<pre>import common from '@/utils/common.js'
import request from '@/utils/request.js'

// 登录
export async function login(payload) {
return await request({
 url: common.BASE_URL + "http://rap2api.taobao.org/app/mock/229799/http://login",
 method: "POST",
 params: payload.params,
 loadding: payload.loadding,
 loaddingText: payload.loaddingText
})
}</pre>
</div>
login页面 有使用 this.$store.state，则需要对store/index.js写代码：
<h4 class="md-end-block md-heading">store/index.js</h4>
<div class="cnblogs_code">
<pre>import Vue from 'vue';
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
state: {
 userinfo: ""
},
actions: {

},
mutations: {

},
getters: {

}
})</pre>
</div>
 到此，直接点击工具栏上的运行-->运行到小程序模拟器-->微信开发者工具，结果如下图所示：
<img src="https://img2020.cnblogs.com/blog/1338464/202109/1338464-20210903174528042-180659992.png">
 然后如果要进行调试，则需要打开调试器，点击调试器界面的source选项，找到对应的代码文件，进行断点调试，比如：
<img src="https://img2020.cnblogs.com/blog/1338464/202109/1338464-20210903174548427-1337926548.png">
 或者直接使用H5模式运行到浏览器，在移除相关会影响代码调试的微信开发者工具方法或属性后，在网页上打开控制台进行调试代码。需要注意的是，部分样式在H5和微信小程序中显示有区别，尽量以小程序显示为主。
<h2 class="md-end-block md-heading">三、打包发行</h2>
 使用hbuilderx进行打包发行小程序，点击工具栏的发行 --> 小程序-微信，然后它会自主打开微信开发者工具界面，这时候我们点击右上角的上传按钮，填写版本号、描述相关信息 - 确定即可。
<h2 class="md-end-block md-heading">四、注意事项</h2>
<h3 class="md-end-block md-heading">事项1</h3>
<div class="cnblogs_code">
<pre>@import "uview-ui/index.scss";</pre>
</div>
 如果引入在除了App.vue之外的文件，而App.vue本身没有引入，可能会引起样式不全修饰等问题，比如登录的密码输入框，当输入密码时候显示清空按钮，此时会让密码框下移。
<h3 class="md-end-block md-heading">事项2</h3>
打包微信小程序只有包小于2MB才能上传。 
来源：https://www.cnblogs.com/Chansea/p/15224176.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 小程序从零开始的开发流程