2023年6月30日发(作者：)

uni-app⼩程序从零开始的开发流程前⾔本⽂基于 HBuilderX 3.1.22 + 微信开发者⼯具 1.05.2106300为主要内容进⾏说明。⽂档版本：1.0.2更新时间：2021-09-04 16:42; 2021-10-22 13:46;⼀、准备uni-app 是⼀个使⽤ 开发所有前端应⽤的框架，开发者编写⼀套代码，可发布到iOS、Android、Web（响应式）、以及各种⼩程序（微信/⽀付宝/百度/头条/QQ/快⼿/钉钉/淘宝）、快应⽤等多个平台。1.1 软件安装创建uni-app有两种，⼀个是通过 HBuilderX 可视化界⾯，另⼀个是通过vue-cli命令⾏。本⽂档以HbuilderX为创建说明，以微信开发者⼯具进⾏运⾏项⽬和代码说明。HbuilderX 下载地址：HbuilderX ⽂档地址：微信开发者⼯具下载地址：HbuilderX安装结束后，⼀般需要下载开发项⽬需要的插件，选择⼯具-->插件安装-->安装或去市场插件查找下载，然后放到⽬录下的uni_modules⽂件夹（安装时候⾃动⽣成），如scss/sass编译，App真机运⾏等。微信开发者⼯具安装结束后，在⼯具栏上选择 设置-->通⽤设置-->安全-->打开服务端⼝。其次，在微信开发者平台()注册开发者账号，找到⾃⼰的开发ID，AppId，并记录好，为项⽬从HbuilderX运⾏到微信开发者⼯具做准备。然后，在微信公众平台()注册对应的账号，⽐如本次注册的是⼩程序，则微信开发者APPID如下图中找到： 接着配置微信开发者⼯具的AppId，在微信开发者⼯具界⾯点击右上⾓详情->基本信息->AppId进⾏配置，如下图：开发环境下配置：点击右上⾓详情->本地设置->打钩"不校验合法域名...."，如下图：1.2 vue⼊门由于uni-app是以vue为基础的⼩程序开发，所以使⽤uni-app之前需要对vue有⼀定的了解。vue ⽂档地址：⼆、基于HbuilderX 的uni-app项⽬搭建2.1 创建项⽬1.在点击⼯具栏⾥的⽂件 -> 新建 -> 项⽬：2.选择uni-app类型，输⼊⼯程名，选择模板，点击创建，即可成功创建。uni-app⾃带的模板有 Hello uni-app ，是官⽅的组件和API⽰例。还有⼀个重要模板是 uni ui项⽬模板，⽇常开发可以参考该模板，毕竟这个模板已内置⼤量常⽤组件。然后在HBuilder X内⼯具栏点击 运⾏—>运⾏到⼩程序模拟器 -->微信开发者⼯具，便能初步看到运⾏成效。2.2 ⽬录补充搭建本次创建使⽤默认版本，创建后的⽬录如下：1 根据需要给项⽬搭建相应的⽬录结构。尚未下载依赖和市场插件之前，创建需要的⽂件夹和⽂件：2 如果要下载vue，vuex等依赖，在之前需要先安装，并且安装好node的包管理器（npm,cnpm,yarn等，⼀个即可，本⽂档以npm为例）node相关地址：安装教程：A. 初始化⽂件B.使⽤代码，其中注意最好加上--save　　npm install vue --save　　npm install vuex --save　　npm install uview-ui --save下载vue和uview依赖。其中，vue是开发uni-app必要的依赖，uview则是uni-app⽣态的⼀个优秀的UI框架，本⽂档以uview作为前端UI开发框架为基础进⾏开发搭建。执⾏下载后，项⽬会⾃动把依赖放进node_modules⽂件夹内，可在node_modules⽂件夹进⾏查看。然后下载开发项⽬需要的市场插件，市场插件默认⾃⾏创建插件所在⽂件夹uni_modules，并存放插件于此。vue相关地址：vuex相关地址：uview相关地址：最后，创建页⾯和对应页⾯的api⽂件（本⽂档仅以登录页⾯、主页⾯和登录api⽂件为例），这样⼀个基本的结构接搭建好了，最终结构⽬录⼤体如下：其中.hbuilderx，unpackage⽂件夹是⾃动⽣成，不必⾃主创建。node_modules，uni_modules⽂件夹⾥的⽂件最好不必去改动。C.⽬录结构说明如下：层级1api

common

componentsnode_modulespages

staticstore

uni_modulesunpackageutils

index

login

层级2

层级3各个模块接⼝⽂件夹登录模块接⼝⽂件公共模块，包含公共基础css等公共基础css符合vue组件规范的uni-app组件⽬录nodejs相关依赖包⽂件⽬录业务页⾯⽂件存放的⽬录index⽂件夹login⽂件夹存放应⽤引⽤的本地静态资源（如图⽚、视频等）的⽬录，注意：静态资源只能存放于此，不要放css⽂件vuex⽬录，也是存放公共属性⽅法的地⽅vuex的主⽂件插件市场下载的第三⽅UI组件⽬录，存放规范的插件。打包⽬录，这⾥有各个平台的打包⽂件。全局公共⽅法⽬录封装的公共可复⽤的⽅法属性⽂件（针对当前项⽬）封装的公共请求⽅法⽂件封装的公共可复⽤的⽅法属性⽂件（针对所有项⽬）应⽤配置⽂件，⽤来配置App全局样式以及监听应⽤⽣命周期Vue初始化⼊⼝⽂件配置应⽤名称、appid、logo、版本等打包信息的⽂件项⽬配置信息⽂件，依赖模块的定义1.锁定包的版本，确保再次下载时不会因为包版本不同⽽产⽣问题

2.加快下载速度，因为该⽂件中已经记录了项⽬所依赖第三⽅包的树状结构和包的下载地址,重新安装时只需下载即可，不需要做额外的⼯作配置页⾯路由、导航条、选项卡等页⾯类信息的⽂件⾃带的公共的css修饰⽂件⽂档说明，可包含⽬录⽂件名称对⽐，注意事项，框架使⽤，技术架构，Git或SVN地址，账号密码等描述主页⾯登录主页⾯

由于在pages创建了登录页⾯，所以需要到去配置相关路径。 "pages": [

{ "path": "pages/login/index", "style": { "navigationBarTitleText": "登录" } }, { "path": "pages/index/index", "style": { "navigationBarTitleText": "⾸页" } } ]编译到任意平台时，static ⽬录下的⽂件均会被完整打包进去，且不会编译。⾮ static ⽬录下的⽂件（vue、js、css 等）只有被引⽤到才会被打包编译进去。static ⽬录下的 js ⽂件不会被编译，如果⾥⾯有 es6 的代码，不经过转换直接运⾏，在⼿机设备上会报错。css、less/scss 等资源不要放在 static ⽬录下，建议这些公⽤的资源放在⾃建的 common ⽬录下。2.3 搭建⽬录⽂件代码根据需要，我们写⼀个简单的登录，使⽤登录功能来阐述各个⽬录⽂件之间的联系。⾸先，我们先把已创建的相关⽂件进⾏挂载到全局，即在或者写相关代码：然后在被引⼊的⽂件写必要的内容信息：　　.clearfix:before{content:" ";display:table}　　.clearfix:after{content:" ";display:table;clear:both}　　.fl{float:left}　　.fr{float:right}rt default function request({ url, method = "GET", params = {}, header, loadding = false, loaddingText = "加载中..."}) { return new Promise((resolve, reject) => { if (loadding) { ading({ title: loaddingText }) } setTimeout(() => { t({ url, method, data: params, header, success: (res) => { if (res) { resolve() } else { resolve(res) } if (loadding) { ading() } }, fail: (res) => { reject(res) } }) }, 1000) }).catch(err => { // 这⾥既可以捕获throw的异常也可以捕获reject的异常 ("[Promise catch]:", err) if (loadding) { ading() } })}rt default { BASE_URL:""}然后我们开始写登录页⾯。登录页⾯需要写⽤户名、密码、登录按钮三个组件，则需要使⽤uview创建。使⽤uview创建组件之前的⼏个确保：确保1

HBuilder X 是安装了

scss/sass 编译插件确保2 在根⽬录下

⽂件中引⼊

uview-ui/@import 'uview-ui/';确保3 在根⽬录下

⽂件中的style代码块添加

lang="scss"属性 和 引⼊

uview-ui/确保4 在根⽬录下⽂件中 引⼊并使⽤uView的JS库，注意这两⾏要放在import Vue之后。import uView from "uview-ui";(uView);如果是不想书写引⼊⽂件代码，即我们每当引⼊⼀个UI组件，就需要添加import xxx from "uView-ui/components/u-xxx/";等相关代码。则需要确保5 在根⽬录下⽂件中 ，配置easycom组件模式// { "easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$" },

// 此为本⾝已有的内容 "pages": [ // ...... ]}接着我们在pages/login/，即登录页⾯中，引⼊uview组件和书写登录代码：pages/login/以上代码为先进⾏获取⽤户登录凭证code，然后才正式登录。因为开发者需要在开发者服务器后台，使⽤ code 换取 openid 和 session_key 等信息。然后使⽤得到的code，和⽤户名密码⼀起作为参数进⾏真正的登录请求。其中，样式最好内聚在组件内，组件内部使⽤的样式，尽量在style中添加scoped，编译时会增加组件hash前缀来防⽌样式污染。login页⾯ 有请求数据，则需要写请求接⼝：rt common from '@/utils/'import request from '@/utils/'// 登录export async function login(payload) { return await request({ url: _URL + "/app/mock/229799/login", method: "POST", params: , loadding: ng, loaddingText: ngText })}接⼝⽂档地址：login页⾯ 有使⽤ this.$，则需要对store/写代码：store/rt Vue from 'vue';import Vuex from "vuex";(Vuex);export default new ({ state: { userinfo: "" }, actions: { }, mutations: { }, getters: { }})到此，直接点击⼯具栏上的运⾏-->运⾏到⼩程序模拟器-->微信开发者⼯具，结果如下图所⽰：然后如果要进⾏调试，则需要打开调试器，点击调试器界⾯的source选项，找到对应的代码⽂件，进⾏断点调试，⽐如：或者直接使⽤H5模式运⾏到浏览器，在移除相关会影响代码调试的微信开发者⼯具⽅法或属性后，在⽹页上打开控制台进⾏调试代码。需要注意的是，部分样式在H5和微信⼩程序中显⽰有区别，尽量以⼩程序显⽰为主。三、打包发⾏使⽤hbuilderx进⾏打包发⾏⼩程序，点击⼯具栏的发⾏ --> ⼩程序-微信，然后它会⾃主打开微信开发者⼯具界⾯，这时候我们点击右上⾓的上传按钮，填写版本号、描述相关信息 - 确定即可。四、注意事项事项1@import "uview-ui/";如果引⼊在除了之外的⽂件，⽽本⾝没有引⼊，可能会引起样式不全修饰等问题，⽐如登录的密码输⼊框，当输⼊密码时候显⽰清空按钮，此时会让密码框下移。事项2打包微信⼩程序只有包⼩于2MB才能上传。