小程序学习笔记

注册小程序账号

www.mp.weixin.qq.com

获取appid

微信开发者工具下载

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

设置代理和外观

创建小程序项目

小程序项目结构

app.json文件

这个文件的第一个路径就是小程序的默认页面

• window配置项
  
  其中上边的两个导航区和背景区可以用window配置
  页面配置中常用的配置项
  

project.config.json

sitemap.json

新建小程序页面

修改项目首页

wxml和html的区别

wxss和css的区别

小程序js逻辑交互

页面的渲染过程

常用的视图容器类组件

小程序的基本使用

组件

• text组件
  
• rich-Text 渲染html
  
• 其他常用组件
  app.json里边的style属性如果值是值是v2就表示使用新版本的样式
  image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：
  
  图解：https://www.cnblogs.com/MaiJiangDou/p/16669567.html

小程序的三大分类

小程序的版本

小程序发布上线的整体步骤

一个小程序的发布上线，一般要经过上传代码->提交审核->发布这三个步骤

• 上传代码
  

• 查看上传后的版本
  

• 提交审核
  

• 发布
  

基于小程序码的推广

小程序运营数据查看的两种方式

阶段总结

数据绑定

• 插值表达式
  

事件绑定（event参数属性）

target和currenttarget的区别

事件传参

block标签

包裹性质标签

wx-if和hidden的区别

wx-for key的使用

wxss和css的区别

rpx自动适配

网络数据请求

发送get请求

小程序中导航的两种方式

导航到tabBar页面

导航到非tabBar页面

其中：open-type="navigate"可以省略

后退导航

编程式导航----导航到tabBar页面

编程式导航----跳转到非tabBar页面

编程式导航----后退

声明式导航传参

或者

接收导航传递过来的参数

启动下拉刷新

配置下拉刷新

监听页面下拉刷新的效果

停止下拉刷新效果

监听页面下拉触底事件以及上拉触底距离

上拉触底事件

对上拉触底进行节流处理

自定义编译模式----编译后自动进入指定页面并传入指定参数

小程序生命周期的分类

应用的生命周期函数

页面的生命周期函数

wxs的应用场景

wxml中无法调用再页面的.js中定义的函数，但是，wxml中可以调用wxs中定义的函数，因此，小程序中wxs的典型应用场景就是“过滤器”

定义并使用外联wxs脚本

wxs的特点

记录

display:flex是实现子view标签左右布局
align-items: 定义了项目在交叉轴上的对齐方式
.container {
align-items: flex-start | flex-end | center（居中对齐） | baseline | stretch;
}
在图片标签上加上display:block就会去除上下图片的间隙

创建组件

局部引用组件

全局引用组件

组件和页面的区别

组件样式的隔离

自定义组件—data数据

自定义组件—methods方法

自定义组件—properties组件传参

自定义组件—数据监听器

纯数据字段

组件中重要的生命周期函数

定义生命周期函数

监听组件所在页面的生命周期

插槽

单个插槽：
启动多个插槽:
定义多个插槽：
使用多个插槽：

组件—父子组件之间的通信

父子组件之间通信的三种方式：

父组件向子组件传值

属性绑定就是通过properties，实现父组件向子组件传值

子组件向父组件传值—通过事件绑定的方式

原理就是在父组件中创建一个方法，然后在子组件中调用这个方法，调用的时候把子组件的值当作参数传给父组件。这样在父组件中就能获取到子组件的值。

小程序对npm包的支持与限制

vant组件库

官网地址：
添加链接描述
安装：
在小程序包所在的本地目录打开cmd执行命令：npm i @vant/weapp@1.3.3 -S --production
构建npm包：
修改app.json:

自定义vant样式

变量的名字从这里获取：
自定义vant样式的话可以f12也能看到控制样式的变量名称，然后在wxss中通过–变量名=“值”就可以修改
（这只是我猜测的，有待考证）
比如：

API Promise化

1. 基于回调函数的异步API的缺点
   

2. 安装promise
   在小程序包所在的本地目录打开cmd执行命令：
   npm install --save miniprogram-api-promise@1.0.4
   一般下载好的npm放在node_modules里，构建后放到miniprogram_npm里，所以一般构建npm前要先把miniprogram_npm这个包给删了。

3. 构建npm
   

4. 配置一下
   

5. 调用
   

全局数据共享

小程序中的全局数据共享方案

安装Mobx相关的包

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
注意: MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm。

创建Store实例并定义计算属性与actions方法

1. 创建store文件
   
2. 编辑内容
   这里的计算属性是特殊的属性，跟numA，numB本质上是一样的，只不过它的值默认是numA和numB的和
   

将store中的成员绑定到需要的页面js中

将Store中的成员绑定到组件中

在组件中使用Store中的成员

分包

在项目中配置使用分包

在app.json中配置好然后保存后，就会在对应的目录结构中生成对应的分包目录

查看分包的体积：

打包原则

分包的引用原则

独立分包

分包预下载

案例—自定义tabBar

实际上就是通过自定义组件的方式实现

添加tabBar代码文件
这样就会读取custom-tab-bar目录下的文件为tabBar页，而不会读取app.json下的list标签中的内容，但是不要删除list中的内容，但是list中的内容不会生效
custom-tab-bar/index.wxml中放着的就是底部的各种tabBar页标签

使用vant提供的tabBar标签组件

在app.json中添加vant对应组件配置

在custom-tab-bar/index.wxml中粘贴官方文档中提供的代码，js代码记得也复制过去
vant也提供了自定义的tabBar标签效果，详见vant官方文档，代码如下：
其中的slot是控制点击和未点击的时候显示的样式，src改成选中或者未选中时展示的图标地址：
自定义某个样式，需要开启styleIsolation:"shared"选项

切换tab页的方式：

修改选中项文本的样式：

uni-app

官网：https://uniapp.dcloud.net.cn/
uni-app 黑马优购项目文档：https://www.escook.cn/docs-uni-shop/mds/1.start.html#_1-1-uni-app-%E7%AE%80%E4%BB%8B
开发工具的安装：https://www.dcloud.io/hbuilderx.html
安装 scss/sass 编译：

修改编辑器的基本设置：

点开源码视图，将如下内容复制到右侧用户设置中：

{
  "editor.colorScheme": "Default",
  "editor.fontSize": 12,
  "editor.fontFamily": "Consolas",
  "editor.fontFmyCHS": "微软雅黑 Light",
  "editor.insertSpaces": true,
  "editor.lineHeight": "1.5",
  "editor.minimap.enabled": false,
  "editor.mouseWheelZoom": true,
  "editor.onlyHighlightWord": false,
  "editor.tabSize": 2,
  "editor.wordWrap": true,
  "explorer.iconTheme": "vs-seti",
  "editor.codeassist.px2rem.enabel": false,
  "editor.codeassist.px2upx.enabel": false
}

新建 uni-app 项目

文件 -> 新建 -> 项目

填写项目基本信息:

一个 uni-app 项目，默认包含如下目录及文件：

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

把项目运行到微信开发者工具

填写自己的微信小程序的 AppID：

在 HBuilderX 中，配置“微信开发者工具”的安装路径:

在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：

在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试:

初次运行成功之后的项目效果：

使用git管理项目

创建 tabBar 页面

在 pages 目录中，创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面。在 HBuilderX 中，可以通过如下的两个步骤，快速新建页面：

在 pages 目录上鼠标右键，选择新建页面

在弹出的窗口中，填写页面的名称、勾选 scss 模板之后，点击创建按钮。截图如下

同理创建出剩余三个页面

配置 tabBar 效果，修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点如下：

{
  "tabBar": {
    "selectedColor": "#C00000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tab_icons/home.png",
        "selectedIconPath": "static/tab_icons/home-active.png"
      },
      {
        "pagePath": "pages/cate/cate",
        "text": "分类",
        "iconPath": "static/tab_icons/cate.png",
        "selectedIconPath": "static/tab_icons/cate-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tab_icons/cart.png",
        "selectedIconPath": "static/tab_icons/cart-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/tab_icons/my.png",
        "selectedIconPath": "static/tab_icons/my-active.png"
      }
    ]
  }
}

删除默认的index首页：

1. 在 HBuilderX 中，把 pages 目录下的 index首页文件夹 删除掉

2. 同时，把 page.json 中记录的 index 首页 路径删除掉

3. 为了防止小程序运行失败，在微信开发者工具中，手动删除 pages 目录下的 index 首页文件夹

4. 同时，把 components 目录下的 uni-link 组件文件夹 删除掉

修改导航条的样式效果

1. 打开 pages.json 这个全局的配置文件
2. 修改 globalStyle 节点如下：

{
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "黑马优购",
    "navigationBarBackgroundColor": "#C00000",
    "backgroundColor": "#FFFFFF"
  }
}

配置网络请求

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用
官方文档：https://www.npmjs.com/package/@escook/request-miniprogram

1. 初始化package.json配置文件：
   在项目根路径下执行命令：npm init -y
2. 在项目根路径下执行命令：npm install @escook/request-miniprogram
3. 最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：

import { $http } from '@escook/request-miniprogram'

uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求拦截器  请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 相应拦截器 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

轮播图效果

获取轮播图数据的方法：

    async getSwiperList() {
      // 3.1 发起请求
      const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
      // 3.2 请求失败
      if (res.meta.status !== 200) {
        return uni.showToast({
          title: '数据请求失败！',
          duration: 1500,
          icon: 'none',
        })
      }
      // 3.3 请求成功，为 data 中的数据赋值
      this.swiperList = res.message
    }

渲染轮播图的 UI 结构：

<template>
  <view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <view class="swiper-item">
          <!-- 动态绑定图片的 src 属性 -->
          <image :src="item.image_src"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

美化 UI 结构，让图片撑起整个区域：

<style lang="scss">
swiper {
 height: 330rpx;

 .swiper-item,
 image {
   width: 100%;
   height: 100%;
 }
}
</style>

配置小程序分包

分包可以减少小程序首次启动时的加载时间
为此，我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中。在 uni-app 项目中，配置分包的步骤如下：

1. 在项目根目录中，创建分包的根目录，命名为 subpkg
2. 在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {}
    },
    {
      "path": "pages/cate/cate",
      "style": {}
    },
    {
      "path": "pages/cart/cart",
      "style": {}
    },
    {
      "path": "pages/my/my",
      "style": {}
    }
  ],
  "subPackages": [
    {
      "root": "subpkg",
      "pages": []
    }
  ]
}

3. 在 subpkg 目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息：
   

小知识点：
为什么vue组件的属性，有的需要加冒号“:”，有的不用?
加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量！

例子：

<el-radio-group v-model="handle">

                    <el-radio :label="true">打开</el-radio>

                    <el-radio :label="false">关闭</el-radio>

</el-radio-group>

输出：true 或 false   值是Boolean类型

<el-radio-group v-model="handle">

                    <el-radio label="true">打开</el-radio>

                    <el-radio label="false">关闭</el-radio>

</el-radio-group>
输出：”true" 或 “false”  值是String类型

4. 将 < swiper-item>< /swiper-item> 节点内的 view 组件，改造为 navigator 导航组件，并动态绑定 url 属性 的值。
   改造之前的 UI 结构：

<swiper-item v-for="(item, i) in swiperList" :key="i">
  <view class="swiper-item">
    <!-- 动态绑定图片的 src 属性 -->
    <image :src="item.image_src"></image>
  </view>
</swiper-item>

改造之后的 UI 结构：

<swiper-item v-for="(item, i) in swiperList" :key="i">
    <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
      <!-- 动态绑定图片的 src 属性 -->
      <image :src="item.image_src"></image>
    </navigator>
</swiper-item>

封装 uni.$showMsg() 方法

当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。具体的改造步骤如下：

1. 在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法：

// 封装的展示消息提示的方法
uni.$showMsg = function (title = '数据加载失败！', duration = 1500) {
  uni.showToast({
    title,
    duration,
    icon: 'none',
  })
}

2. 今后，在需要提示消息的时候，直接调用 uni.$showMsg() 方法即可：

async getSwiperList() {
   const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
   if (res.meta.status !== 200) return uni.$showMsg()
   this.swiperList = res.message
}

渲染分类导航的 UI 结构

效果图如下：

定义如下的ui结构：

<!-- 分类导航区域 -->
<view class="nav-list">
   <view class="nav-item" v-for="(item, i) in navList" :key="i">
     <image :src="item.image_src" class="nav-img"></image>
   </view>
</view>

通过如下的样式美化页面结构：

.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;

  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}

点击第一项，切换到分类页面：

1. 为 nav-item 绑定点击事件处理函数：

<!-- 分类导航区域 -->
<view class="nav-list">
  <view class="nav-item" v-for="(item, i) in navList" :key="i" @click="navClickHandler(item)">
    <image :src="item.image_src" class="nav-img"></image>
  </view>
</view>

2. 定义 navClickHandler 事件处理函数：

// nav-item 项被点击时候的事件处理函数
navClickHandler(item) {
  // 判断点击的是哪个 nav
  if (item.name === '分类') {
    uni.switchTab({
      url: '/pages/cate/cate'
    })
  }
}

渲染楼层里的图片

效果图如下：

1. 定义楼层图片区域的 UI 结构

<!-- 楼层图片区域 -->
<view class="floor-img-box">
  <!-- 左侧大图片的盒子 -->
  <view class="left-img-box">
    <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
  </view>
  <!-- 右侧 4 个小图片的盒子 -->
  <view class="right-img-box">
    <view class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0">
      <image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}"></image>
    </view>
  </view>
</view>

2. 美化楼层图片区域的样式

.right-img-box {
  display: flex; //flex布局，标签下的所有元素称之为项目；项目默认水平排列不换行
  flex-wrap: wrap;//设置项目换行
  justify-content: space-around;//设置项目在水平上分散对齐
}

.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}

后边因为内容众多就不学了，直接跳到支付那里学习

登陆页面样式代码

关于flex布局的知识点详见：https://zhuanlan.zhihu.com/p/25303493

点击登录按钮获取微信用户的基本信息

需求描述：需要获取微信用户的头像、昵称等基本信息

1. 为登录的 button 按钮绑定 open-type=“getUserInfo” 属性，表示点击按钮时，希望获取用户的基本信息：

<!-- 登录按钮 -->
<!-- 可以从 @getuserinfo 事件处理函数的形参中，获取到用户的基本信息 -->
<button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>

2. 在 methods 节点中声明 getUserInfo 事件处理函数如下：

methods: {
  // 获取微信用户的基本信息
  getUserInfo(e) {
    // 判断是否获取用户信息成功
    if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')

    // 获取用户信息成功， e.detail.userInfo 就是用户的基本信息
    console.log(e.detail.userInfo)
  }
}

当获取到了微信用户的基本信息之后，还需要进一步调用登录相关的接口，从而换取登录成功之后的 Token 字符串

1. 在 getUserInfo 方法中，预调用 this.getToken() 方法，同时把获取到的用户信息传递进去：

// 获取微信用户的基本信息
getUserInfo(e) {
  // 判断是否获取用户信息成功
  if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')

  // 将用户的基本信息存储到 vuex 中
  this.updateUserInfo(e.detail.userInfo)

  // 获取登录成功后的 Token 字符串
  this.getToken(e.detail)
}

2. 在 methods 中定义 getToken 方法，调用登录相关的 API，实现登录的功能：

// 调用登录接口，换取永久的 token
async getToken(info) {
  // 调用微信登录接口
  const [err, res] = await uni.login().catch(err => err)
  // 判断是否 uni.login() 调用失败
  if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')

  // 准备参数对象
  const query = {
    code: res.code,
    encryptedData: info.encryptedData,
    iv: info.iv,
    rawData: info.rawData,
    signature: info.signature
  }

  // 换取 token
  const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query)
  if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')
  uni.$showMsg('登录成功')
}

退出登录操作

// 退出登录
async logout() {
  // 询问用户是否退出登录
  const [err, succ] = await uni.showModal({
    title: '提示',
    content: '确认退出登录吗？'
  }).catch(err => err)

  if (succ && succ.confirm) {
     // 用户确认了退出登录的操作
     // 需要清空 vuex 中的 userinfo、token 和 address
     this.updateUserInfo({})
     this.updateToken('')
     this.updateAddress({})
  }
}

登录成功之后再返回之前的页面

核心实现思路：在自动跳转到登录页面成功之后，把返回页面的信息存储到 vuex 中，从而方便登录成功之后，根据返回页面的信息重新跳转回去。

// 返回登录之前的页面
navigateBack() {
  // redirectInfo 不为 null，并且导航方式为 switchTab
  if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
    // 调用小程序提供的 uni.switchTab() API 进行页面的导航
    uni.switchTab({
      // 要导航到的页面地址
      url: this.redirectInfo.from,
      // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
      complete: () => {
        this.updateRedirectInfo(null)
      }
    })
  }
}

微信支付

在请求头中添加 Token 身份认证的字段

1. 原因说明：只有在登录之后才允许调用支付相关的接口，所以必须为有权限的接口添加身份认证的请求头字段
2. 打开项目根目录下的 main.js，改造 $http.beforeRequest 请求拦截器中的代码如下：

// 请求开始之前做一些事情
$http.beforeRequest = function(options) {
  uni.showLoading({
    title: '数据加载中...',
  })

  // 判断请求的是否为有权限的 API 接口
  if (options.url.indexOf('/my/') !== -1) {
    // 为请求头添加身份认证字段
    options.header = {
      // 字段的值可以直接从 vuex 中进行获取
      Authorization: store.state.m_user.token,
    }
  }
}

微信支付的流程

1. 创建订单
   请求创建订单的 API 接口：把（订单金额、收货地址、订单中包含的商品信息）发送到服务器
   服务器响应的结果：订单编号
2. 订单预支付
   请求订单预支付的 API 接口：把（订单编号）发送到服务器
   服务器响应的结果：订单预支付的参数对象，里面包含了订单支付相关的必要参数
3. 发起微信支付
   调用 uni.requestPayment() 这个 API，发起微信支付；把步骤 2 得到的 “订单预支付对象” 作为参数传递给 uni.requestPayment() 方法
   监听 uni.requestPayment() 这个 API 的 success，fail，complete 回调函数

// 微信支付
async payOrder() {
  // 1. 创建订单
  // 1.1 组织订单的信息对象
  const orderInfo = {
    // 开发期间，注释掉真实的订单价格，
    // order_price: this.checkedGoodsAmount,
    // 写死订单总价为 1 分钱
    order_price: 0.01,
    consignee_addr: this.addstr,
    goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
  }
  // 1.2 发起请求创建订单
  const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
  if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
  // 1.3 得到服务器响应的“订单编号”
  const orderNumber = res.message.order_number

   // 2. 订单预支付
   // 2.1 发起请求获取订单的支付信息
   const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })
   // 2.2 预付订单生成失败
   if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
   // 2.3 得到订单支付相关的必要参数
   const payInfo = res2.message.pay

   // 3. 发起微信支付
   // 3.1 调用 uni.requestPayment() 发起微信支付
   const [err, succ] = await uni.requestPayment(payInfo)
   // 3.2 未完成支付
   if (err) return uni.$showMsg('订单未支付！')
   // 3.3 完成了支付，进一步查询支付的结果
   const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber })
   // 3.4 检测到订单未支付
   if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
   // 3.5 检测到订单支付完成
   uni.showToast({
     title: '支付完成！',
     icon: 'success'
   })
 }

发布小程序的流程

1. 点击 HBuilderX 菜单栏上的 发行 -> 小程序-微信(仅适用于uni-app)：
   

2. 在弹出框中填写要发布的小程序的名称和AppId之后，点击发行按钮：
   

3. 在 HBuilderX 的控制台中查看小程序发布编译的进度：
   

4. 发布编译完成之后，会自动打开一个新的微信开发者工具界面，此时，点击工具栏上的上传按钮：
   

5. 填写版本号和项目备注之后，点击上传按钮：
   

6. 上传完成之后，会出现如下的提示消息，直接点击确定按钮即可：
   

7. 通过微信开发者工具上传的代码，默认处于版本管理的开发版本列表中，如图所示：
   

8. 将 开发版本提交审核 -> 再将 审核通过的版本发布上线，即可实现小程序的发布和上线：
   

发布为 Android App 的流程

1. 点击 HBuilderX 状态栏左侧的未登录按钮，弹出登录的对话框：
   

2. 在弹出的登录对话框中，填写账号和密码之后，点击登录即可：
   

3. 打开项目根目录中的 manifest.json 配置文件，在基础配置面板中，获取uni-app 应用标识，并填写应用名称：
   

4. 切换到 App 图标配置面板，点击浏览按钮，选择合适的图片之后，再点击自动生成所有图标并替换即可：
   

5. 点击菜单栏上的 发行 -> 原生 App-云打包
   

6. 勾选打包配置如下：
   

7. 在控制台中查看打包的进度信息：
   

8. 点击链接下载 apk 的安装包，并安装到 Android 手机中查看打包的效果。