uni-app小程序从零开始的开发流程
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.js，并且安装好node的包管理器（npm,cnpm,y
arn等，⼀个即可，本⽂档以npm为例）
node相关地址：
安装教程：
A. 初始化package.json⽂件
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.⽬录结构说明如下：
层级1层级2层级3描述
api各个模块接⼝⽂件夹
login.js登录模块接⼝⽂件
common公共模块，包含公共基础css等
base.css公共基础css
components符合vue组件规范的uni-app组件⽬录
node_modules nodejs相关依赖包⽂件⽬录
pages业务页⾯⽂件存放的⽬录
index index⽂件夹
index.vue主页⾯
login login⽂件夹
index.vue登录主页⾯
static存放应⽤引⽤的本地静态资源（如图⽚、视频等）的⽬录，注意：静态资源只能存放于此，不要放css⽂件store vuex⽬录，也是存放公共属性⽅法的地⽅
index.js vuex的主⽂件
uni_modules插件市场下载的第三⽅UI组件⽬录，存放规范的插件。
unpackage打包⽬录，这⾥有各个平台的打包⽂件。
utils全局公共⽅法⽬录
common.js封装的公共可复⽤的⽅法属性⽂件（针对当前项⽬）
request.js封装的公共请求⽅法⽂件
utils.js封装的公共可复⽤的⽅法属性⽂件（针对所有项⽬）
App.vue应⽤配置⽂件，⽤来配置App全局样式以及监听应⽤⽣命周期
main.js Vue初始化⼊⼝⽂件
manifest.json配置应⽤名称、appid、logo、版本等打包信息的⽂件
小视频app开发package.json项⽬配置信息⽂件，依赖模块的定义
package-lock.json 1.锁定包的版本，确保再次下载时不会因为包版本不同⽽产⽣问题
2.加快下载速度，因为该⽂件中已经记录了项⽬所依赖第三⽅包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的⼯作
pages.json配置页⾯路由、导航条、选项卡等页⾯类信息的⽂件
uni.scss⾃带的公共的css修饰⽂件
README.md⽂档说明，可包含⽬录⽂件名称对⽐，注意事项，框架使⽤，技术架构，Git或SVN地址，账号密码等由于在pages创建了登录页⾯，所以需要到pages.json去配置相关路径。
pages.json
"pages": [
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "⾸页"
}
}
]
<!--注意：-->
编译到任意平台时，static ⽬录下的⽂件均会被完整打包进去，且不会编译。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。