小程序项目(新版)开发步骤
开发框架:uni-app=>基于vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到app、H5、以及各种小程序平台
开发工具:HBuilderX(App开发版:集成了大部分插件,可开箱即用;标准版:需要手动安装插件,如果用cli方式创建可以直接用标准版)
注意:通过vue-cli创建项目需要提前安装环境:node(v12.22.1或以上),vue-cli(3x或以上),建议直接使用HBuilderX软件进行开发效率更快
小程序/h5/app端开发流程基本遵循以下截图流程
下面大概讲解下普通创建uni-app项目和基于公司框架nebulars创建新项目
一、普通创建uni-app项目
1.在HBuilderX创建项目
a.文件>新建>项目
b.在新建项目面板配置选择uni-app>项目名称>项目目录>选择模版(这里选择了空模版,方便自行拓展)
2.引入uni组件库,你可以通过以下两种方式引入
a.通过npm安装uview-ui。终端进入项目目录运行npm install uview-ui,然后在项目app.vue引入组件库样式:@import 'uview-ui/index.scss',最后在main.js引入组件库并全局引入组件:import uView from 'uview- ui';Vue.use(uView);
b.你可以复制文件夹common(通过选择模版为Hello uni-app创建的项目目录下common),然后在app.vue引入common文件夹下的样式@import './common/uni.css';
3.封装接口api
建议将所有项目api放置在同一文件内如:api.model.js,并简述api功能
4.通过axios封装成http
5.封装接口api和http
a.可以封装到class类里
b.可以封装到vuex store的actions里
6.在@/pages下创建uni-app页面,用HBuilderX创建的页面会自动注册到pages.json。其他方式创建需要手动在pages.json添加页面路径
完成以上步骤后可以进入页面开发阶段
二、基于nebulars创建新uni-app项目
- 确认新项目名称,小程序端应该命名成:[项目名称]-uni
- 直接拷贝uni-olay项目以下内容(如图选中部分),作为新项目架子
- 如果有除封装到nebulars组件包,还需增加业务接口的话
需要编辑如下:
接口path:在registry/api.js
封装接口request方法:在registry/store.js的actions里
nebulars里封装了通用接口,接口path定义在@nebulars/util/package/storeApis.js文件里
- mian.js文件里除对vue实例化和实例化挂载以外,还有:
1> 引入插件:vuex, uview-ui
2> 整合所有接口path到applet.$kit.$rest
3> 整合所有接口request方法到$store
2、3的实现代码如下截图(红线框住部分)
5. 终端进入该项目路径运行npm install 安装相关依赖,包括nebulars包
6. 本地开发新页面增加在pages/xxx.vue 并且到pages.json文件中配置路由
7. 开发规范基本参考旧版小程序规范:
8. 完成整个项目开发,进行运行>测试>发布
9.如果你熟悉vue-scaff框架结构的话,你会发现这个项目类仿照了vue scaff的设计思路但并不完全一样