小程序项目(新版)开发步骤

小程序项目(新版)开发步骤

开发框架：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项目

1. 确认新项目名称，小程序端应该命名成：[项目名称]-uni
2. 直接拷贝uni-olay项目以下内容（如图选中部分），作为新项目架子
3. 如果有除封装到nebulars组件包，还需增加业务接口的话
   需要编辑如下：
   接口path：在registry/api.js
   封装接口request方法：在registry/store.js的actions里
   nebulars里封装了通用接口，接口path定义在@nebulars/util/package/storeApis.js文件里
    
4. 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的设计思路但并不完全一样