20210511-小程序开发

小程序开发到上架

视频下载

• 小程序及APP组件开发

1.0 介绍

我们使用的时 uni-app 来开发小程序，uni-app 是一个使用vue 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

2.0 工具

• 开发规范：推荐开发规范
• 开发语言： Vue.js
• 插件市场：官方插件市场
• 开发社区：官方社区
• 组件库：小程序推荐使用的组件库 UView、@flyriselink/pai-mp-ui
• 网络库：小程序模板使用的网络库
• 开发工具：HBuilderX、Pai工具
• 开发者后台：管理套件、管理工程、开发文档、数据大屏
• 凌云控制台：安装套件、管理用户、管理园区

3.0 创建小程序工程

3.1 新建工程

使用 Pai 命令新建小程序模板工程 pai-uni-preview

pai create micro -n pai-uni-preview

cmd 命令

Microsoft Windows [版本 10.0.19042.1237]
(c) Microsoft Corporation。保留所有权利。

E:\preview>pai login   //cmd 命令--1
Found E:\Pai\pai-cli\.pai\wrapper\pai-wrapper.jar
请输入账号：cm  //输入用户名--2
请输入密码：    //输入密码--3

 欢迎你，cm

E:\preview>pai create micro -n pai-uni-preview
Found E:\Pai\pai-cli\.pai\wrapper\pai-wrapper.jar

输入的套件标识将用于识别并自动把当前工程添加到套件的关联列表
，可从开发中心套件中复制，如：cn.flyrise.oauth
如果暂时无法获取可以直接回车保持为空，稍后再从开发中心套件详情中手动添加关联
请输入套件标识(选填):     //可以为空--4
已创建工程pai-uni-preview , 所在位置：E:\preview\pai-uni-preview

3.2 目录结构

├─.hbuilderx
├─dist
│  ├─build
│  ├─dev
│  └─release
├─node_modules
├─public
├─src                     //工程目录
├   ├─api                  //api 接口
├   ├─common
│   │  └─uview-ui
├   ├─components
│   │  ├─flyrise
│   │  └─page-nav
├   ├─pages               //vue界面
│   │  ├─pai-ui
│   │  └─uview-ui
├   ├─static
├   └─utils
├─.gitignore
├─babel.config.js
├─package.json           //库统一管理
├─package-lock.json
├─postcss.config.js
├─README.md
└─tsconfig.json

3.3 初始化工程

首先请全局安装 nodejs 并支持 npm 命令

3.3.1 安装nodejs

nodejs ：安装

3.3.2 初始化工程

npm i

Mac 初始化异常解决

3.3.4 cmd 命令

Microsoft Windows [版本 10.0.19042.1237]
(c) Microsoft Corporation。保留所有权利。

E:\preview\pai-uni-preview>npm i    //cmd 命令

> node-sass@4.14.1 install E:\preview\pai-uni-preview\node_modules\node-sass
> node scripts/install.js
.......

4.0 运行小程序

4.1 浏览器调试

1. 打开 HBuilderX 开发工具；
2. 导入pai-uni-preview项目，打开任意界面；
3. 点击工具栏的运行 ->运行到浏览器 ->Chrome；
4. 即可在浏览器里面体验uni-app 的 H5 版。

4.2 真机运行

1. 连接手机，手机设置中开启开发者模式，并开启 USB 调试；
2. 进入pai-uni-preview项目，进入任意界面；
3. 点击工具栏的运行 -> 运行到手机或模拟器 -> 选择运行的设备。

4.3 微信开发者工具

1. 安装微信开发者工具；
2. 配置微信AppId ;
3. 进入pai-uni-preview项目，进入任意界面；
4. 点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具。

5.0 发布小程序

5.1 配置工程

在发布小程序前，更具需求配置 pages.json 和 manifest.json 文件。

5.1.1 pages.json

小程序的 pages.json 中配置微应用的界面信息，在打包微应用时，会自动上传。

• C（公众方） ：在可视化楼层的点击事件中显示；
• B（企业方）：在工作台的应用中心显示；
• P（园区方）：运营企业会显示，入驻企业不显示。

//@/src/pages.json
{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "Hello Pai"
    },
    "paiUserGroup":"C",
    "paiName":"首页"
}, {
    "path": "pages/login/index",
    "style": {
        "navigationStyle": "custom",
        "app-plus": {
            "titleNView": false
        }
    },
    "paiUserGroup":"B",
    "paiName":"登录"
}

注意：pages.json 代码中不能有注释，如果有，请务必删除，否则服务端解析会报错。

5.1.2 manifest.json

主要是发布静态网页时，配置 H5访问的路径。还有就是如果出现代理问题，也可以在这里配置。

• name：工程名，默认就好
• appid：小程序的唯一值，微应用会用到
• h5：静态网页路径
• 跨域问题解决

{
    "name" : "pai-uni-preview",
    "appid" : "__UNI__1b832cc9b264ada8317876e6cbc99eee",
    "versionName" : "1.0.0",
    "versionCode" : "100",
    "transformPx" : false,
    /* 5+App特有相关 */
    "app-plus" : {
        "compatible" : {
            "ignoreVersion" : true
        }
       ..... 
    },
    "h5" : {
        "router" : {
             "base" : "/uni-preview/"
        }
    }
}

5.2 提交代码

使用 pai工具，将代码提交到凌云代码仓库。

Microsoft Windows [版本 10.0.19042.1237]
(c) Microsoft Corporation。保留所有权利。

E:\preview\pai-uni-preview>pai login   //登录 pai 工具
Found E:\Pai\pai-cli\.pai\wrapper\pai-wrapper.jar
请输入账号：cm  //输入用户名
请输入密码：    //输入密码

 欢迎你，cm

E:\preview\pai-uni-preview>pai init  //初始化 git 工程
Found E:\Pai\pai-cli\.pai\wrapper\pai-wrapper.jar
Git仓库初始化成功 !

E:\preview\pai-uni-preview>pai add *  //添加文件到暂存区
Found E:\Pai\pai-cli\.pai\wrapper\pai-wrapper.jar

E:\preview\pai-uni-preview>pai commit  //提交文件到本地仓库
Found E:\Pai\pai-cli\.pai\wrapper\pai-wrapper.jar
请输入提交信息：演示 app
......

E:\preview\pai-uni-preview>pai push  //同步本地仓库的工程到 pai 仓库
Found E:\Pai\pai-cli\.pai\wrapper\pai-wrapper.jar
......

5.3 打包工程

打包时，后台会到凌云代码仓库中，拉取默认分支的数据，然后进行打包

5.3.1 打包工程

pai deploy micro -n pai-uni-preview

5.3.2 cmd命令

Microsoft Windows [版本 10.0.19042.1237]
(c) Microsoft Corporation。保留所有权利。

E:\Android\AndroidProject\PiUniApp\preview\pai-uni-preview>pai login //登录
Found E:\Pai\pai-cli\.pai\wrapper\pai-wrapper.jar
请输入账号：cm
请输入密码：

 欢迎你，cm

E:\preview\pai-uni-preview>pai deploy micro -n pai-uni-preview //打包
Found E:\Pai\pai-cli\.pai\wrapper\pai-wrapper.jar
小π 正在努力中，请耐心等待哦......
小程序 0.0.2 已发布  //打包后的版本

6.0 上架小程序

6.1 开发者后台

6.1.1 登录

开发者后台

6.1.2 打开工程

未添加到套件

未添加到套件的工程，在 我的工程 中寻找

已添加到套件

已添加到套件的工程，在 应用套件 -> 工程管理 中寻找

6.1.2 预览调试

• 页面路径：pages.json 中的 path 路径；
• 套件 ID：如果小程序需要用到，可以在这里手动添加；
• 二维码：使用凌云APP，登录成功后，使用扫码进行预览。

6.2 新增套件

未创建套件：请先创建套件，我的套件 -> 添加套件

已创建套件：直接进入套件关联工程即可

• 园区套件：可以在园区中进行使用
• 企业套件：只能在工作台中可以看到

6.3 关联工程

打开 应用套件 -> 工程管理管理小程序工程

注意：关联到套件的工程，将不会在我的工程中显示

6.4 添加微应用

6.4.1 页面管理

在 pages.json 配置了入口，打包提交后，可以在页面管理中找到。

6.4.2 微应用管理

注意：小程序是添加 APP微应用

6.5 沙箱套件

沙箱，可以用来测试套件。

6.5.1 初始化沙箱

6.5.1 沙箱套件

使用沙箱安装套件

• 公众方：登录pc工作台，在 视化楼层套件 的任意空间的点击事件进行配置；
• 企业方：登录凌云APP，在工作台->应用中心查看。

6.6 上架套件

在应用套件 -> 版本管理 -> 新建发行版

注意：提交的套件需要 运营管理后台 审核，审核通过后可以查看，测试尽量用沙箱。

7.0 安装应用套件

控制台 ->应用 -> 应用市场 -> 安装套件

注意：

1. 正式版：审核通过后，要在控制台安装 ，才能使用；
2. 测试版：沙箱测试套件，登录对应的账号，可以直接进行使用，无需安装。