搭建环境

  1. 官方地址下载开发工具

  2. 构建项目

    1. 可以新建，也可以导入原有项目
    2. 需要去注册一个小程序以获得 AppId，也可以使用测试号

      小程序配置

  3. app.json全局配置文档

  4. 解释 ```json {

    页面路径

    “pages”: [ “pages/index/index”, “pages/cart/cart”, “pages/detail/detail”, “pages/my/my”, “pages/demo/demo” ],

用于设置小程序的状态栏、导航条、标题、窗口背景色

“window”: {

颜色

“navigationBarBackgroundColor”: “#f8f8f8”,

导航栏标题文字内容

“navigationBarTitleText”: “花间”,

导航栏标题颜色，仅支持 black / white

“navigationBarTextStyle”: “black”,

下拉 loading 的样式，仅支持 dark / light

“backgroundTextStyle”: “dark”,

背景颜色

“backgroundColor”: “#f8f8f8” },

底部tab栏

“tabBar”: {

选中的tab颜色

“selectedColor”: “#c03131”,

默认颜色

“color”: “#797d82”,

tab列表配置

“list”: [ { “iconPath”: “./img/home.png”, “selectedIconPath”: “./img/homeing.png”, “pagePath”: “pages/index/index”, “text”: “首页” }, { “iconPath”: “./img/cart.png”, “selectedIconPath”: “./img/carting.png”, “pagePath”: “pages/cart/cart”, “text”: “购物车” }, { “iconPath”: “./img/my.png”, “selectedIconPath”: “./img/mying.png”, “pagePath”: “pages/my/my”, “text”: “个人中心” }, { “iconPath”: “./img/my.png”, “selectedIconPath”: “./img/mying.png”, “pagePath”: “pages/demo/demo”, “text”: “demo” } ] },

使用的组件放在这里

“usingComponents”: {

}, “sitemapLocation”: “sitemap.json” }

  1. <a name="V9wXn"></a>
  2. ## 基础
  3. <a name="us43j"></a>
  4. ### 静态页面
  6. 1. 标签
  7.    1. view         =>        div
  8.    1. text        =>         span
  9.    1. img         =>         [image](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)
  10.    1. 地图，音视频，画布等
  11. 2. 可同时使用px、rpx 作为像素单位，`1px = 2rpx `
  12. 2. page 标签为页面的最外层的容器
  13. 2. [底部 tab 配置](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar)
  14. 2. [开放数据](https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html)
  15. 2. 编译模式
  16. 2. [在小程序中使用 vant-ui](https://vant-contrib.gitee.io/vant-weapp/#/home)
  17. 2. [小程序中使用 less](https://developers.weixin.qq.com/community/develop/article/doc/000e427c49c218e6b9781bfdf5b013)
  18. <a name="Sw2z2"></a>
  19. ### 生命周期
  20. | 周期函数 | 作用 |
  21. | --- | --- |
  22. | onLoad | 监听页面加载 |
  23. | onReady | 监听页面初次渲染完成 |
  24. | onShow | 监听页面显示 |
  25. | onHide | 监听页面隐藏 |
  26. | onUnload  | 监听页面卸载 |
  27. | onPullDownRefresh  | 监听用户下拉刷新 |
  28. | onReachBottom  | 监听用户上拉触底事件 |
  29. | onShareAppMessage  | 监听用户点击右上角分享 |
  31. **onLoad 与 onShow 的区别：**
  33. - onLoad 只会在小程序中执行一次；即当前页面执行过 onLoad 函数时，然后切出该页面再切入时，onLoad 函数不再执行
  34. - onShow 每次切回页面时，都会触发这个生命周期函数
  35. <a name="HwtWa"></a>
  36. ### 请求数据
  38. 1. 关闭合法域名检测
  39.    - 小程序只支持 https，项目中请求了非 https 和不在域名白名单上的接口会报错
  40.    - 需要到小程序后台配置域名白名单，小程序右上角详情 =>本地设置 => 不校验合法域名...
  41. 2. 发送请求[文档地址](https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html) 
  42. ```javascript
  43. wx.request({
  45.   # 请求地址
  46.   url: "test.php",     
  47.   data: {
  48.     x: "",
  49.     y: "",
  50.   },
  52.   # 请求方式 
  53.   method: "get",
  55.   # 默认值，定义响应数据的格式
  56.   header: {
  57.       "content-type": "application/json", 
  58.   },
  60.   # 成功的回调
  61.   success(res) {
  62.       console.log(res.data);
  63.   };
  65.   # 失败的回调
  66.   fail(error) {
  67.       console.log(error);
  68.   };
  70.   # 不管是成功还是失败都会调用此方法
  71.   complete() {
  72.          console.log("done");
  73.   };
  74. });

  1. 封装小程序的请求

    • 配置 baseUrl ```javascript

      config.js

      let env = “prod”; let baseUrl = “”; if (env === “dev”) {

    本地地址

    baseUrl = “https://localhost:3009“; } else if (env === “prod”) { baseUrl = “https://huruqing.cn:3009“; }

导出

export { baseUrl };

  2.    - reques.js 
  3. ```javascript
  4. import { baseUrl } from "./config.js";
  6. /**
  7.  * 封装请求
  8.  * url：请求地址
  9.  * data：请求参数
  10.  * method: 请求类型
  11.  * */
  12. const request = (url, data, method) => {
  14.   # 获取token，登录时存的
  15.   let token = wx.getStorageSync("token");
  16.   url = baseUrl + url;
  17.   return new Promise((resolve, reject) => {
  19.     # 请求
  20.     wx.request({
  21.       url,
  22.       method,
  23.       data,
  24.       header: {
  25.         "user-token": token,
  26.       },
  27.       success: (res) => {
  28.         if (res.data.code == 666) {
  29.           resolve(res.data);
  30.         } else if (res.data.code == 603) {
  31.           wx.removeStorageSync("token");
  32.           wx.showModal({
  33.             title: "提示",
  34.             content: "登录已过期，是否重新登录",
  35.             success(res) {
  36.               if (res.confirm) {
  38.                 # 跳转到个人中心页面
  39.                 wx.switchTab({
  40.                   url: "/pages/my/my",
  41.                 });
  42.               } else if (res.cancel) {
  43.                 console.log("用户点击取消");
  44.               }
  45.             },
  46.           });
  47.         } else {
  48.           reject(res.data.msg);
  49.         }
  50.       },
  51.       fail: (err) => {
  52.         reject("网络异常");
  53.       },
  54.     });
  55.   });
  56. };
  58. const get = (url, data) => {
  59.   return request(url, data, "get");
  60. };
  62. const post = (url, data) => {
  63.   return request(url, data, "post");
  64. };
  66. export default {
  67.   get,
  68.   post,
  69. };

渲染页面

  1. data 和 setData

    1. Page({
    2. data: {
    3.  count: 1,
    4. },
    6. changeCount() {
    7.  // 获取data里count的值
    8.  let count = this.data.count;
    9.  // 加1
    10.  this.setData({
    11.    count: ++count,
    12.  });
    13. },
    14. });

  2. 插值表达式 {{}}，wxml 中所有的变量都要使用{{}}，(除了wx:key)

    1. 如果数组成员是字符串或者数字，wx:key="index" 或 wx:key="*this"
    2. 如果数组成员是对象, 比如：[{name:'zs',id:1}],wx:key="id"
  3. 条件渲染 wx:if
  4. 列表渲染 wx:for 默认有 item 和 index
  5. 双重 wx:for 时需要其中一个指定 item 和 index

    绑定事件

  1. 例子

    1. <view data-username="xxxx" bindtap="tapName"> Click me! </view>
    1. Page({
    2. tapName(event) {
    4.  # 小程序事件不能像 vue 那样传参，只能通过自定义属性来传参
    5.  let username = event.target.dataset.username;
    6.  console.log(username);
    7. },
    8. });
    • 注意：定义的实参名只能小写，大驼峰式需要用 data-user-name="xxxx" 格式
  2. 常见事件类型 | 类型 | 触发条件 | | —- | —- | | touchstart | 手指触摸动作开始 | | touchmove | 手指触摸后移动 | | touchcancel | 手指触摸动作被打断，如来电提醒，弹窗 | | touchend | 手指触摸动作结束 | | tap | 手指触摸后马上离开 | | longpress | 手指触摸后，超过 350ms 再离开，如果该事件被触发，tap 事件将不被触发 | | transitionend | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 | | animationstart | 会在一个 WXSS animation 动画开始时触发 | | animationiteration | 会在一个 WXSS animation 一次迭代结束时触发 | | animationend | 会在一个 WXSS animation 动画完成时触发 | | touchforcechange | 在支持 3D Touch 的 iPhone 设备，重按时会触发 |

页面跳转

  1. 非 tab 栏跳转

    • 标签式

      1. <navigator url="/pages/index/index"> 跳转到新页面 </navigator>

    • 函数式

      1. // 普通页面跳转
      2. wx.navigateTo({
      3. url: "/pages/index/index",
      4. });

  2. tab 栏跳转

    • 标签式

      1. <navigator url="/pages/index/index" open-type="switchTab"> 切换 Tab </navigator>

    • 函数式

      1. wx.switchTab({
      2. url: "pages/index/index",
      3. });

  3. 重定向

    • 标签式

      1. <navigator url="/pages/index/index" open-type="redirect"> 在当前页打开 </navigator>

    • 函数式

      1. # 但不允许跳转到 tabbar 页面
      2. wx.redirectTo({
      3. url: "/pages/index/index"
      4. })

  4. 跳转到小程序

    • 标签式 ```html打开绑定的小程序 
  1. <a name="vSjkU"></a>
  2. ### 路由传参
  4. - 跳转的 tabBar 页面的路径后不能带参数。
  5. 1. 标签式传参
  6. ```html
  7. <navigator wx:for="{{flowerList}}" url="/pages/detail/detail?flowerId={{item.flowerId}}" wx:key="{{flowerId}}"> 路由传参 </navigator>
  • 接收
    1. onLoad: function (options) {
    2. console.log(options.flowerId);
    3. },
  1. 函数式传参
    • 单个参数 ```javascript wx.navigateTo({ url: ‘/pages/detail/detail?flowerId=213213312fwefef’, }) 
  2.    - 多个参数
  3. ```javascript
  4. let obj = {useranme: 'zs',age:100};
  6. # 将对象转成json字符串
  7. let query = JSON.stringify(obj);
  9. wx.navigateTo({
  10.   url: '/pages/detail/detail?query='+query,
  11. })

数据缓存

  1. 异步方法

    • 存储数据

      1. wx.setStorage({
      2. key: "key",
      3. data: "value",
      4. });

    • 获取数据

      1. wx.getStorage({
      2. key: "key",
      3. success(res) {
      4. console.log(res.data);
      5. },
      6. });

  2. 同步方法

    • 存储数据 ```javascript wx.setStorageSync(““, ““);

// 例子 let token = ‘asdfasdfasjdflasdjf;asdf;asdfjsak;ldf’; wx.setStorageSync(‘token’,token);

  2.    - 获取数据
  3. ```javascript
  4. let token = wx.getStorageSync('token');

进阶

用户授权

  • 用户授权的功能列表，必须绑定点击事件, 用户去点击才能调起授权, 我想应该是腾讯想提醒用户要慎重

  1. 录音授权

    1. wx.authorize({
    2. # 授权类型
    3. scope: "scope.record",
    4. success() {
    5. # 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
    6. console.log('授权成功');
    7.  },
    8. });

  2. 获取用户信息授权

    1. getUserProfile(e) {  
    2. wx.getUserProfile({
    4.  # 必须要有该授权的描述
    5.  desc: '用于完善会员资料',  
    6.  success: (res) => {
    7.    console.log(res); 
    8.  }
    9. })
    10. },

  3. 获取用户手机号码流程文档地址

    1. <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 获取手机号码</button>
    1. getPhoneNumber (e) {
    2. console.log(e.detail.errMsg);
    3. console.log(e.detail.iv);
    4. console.log(e.detail.encryptedData);
    5. }

  • 步骤:

    1. 需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据 (跟上面获取用户信息步骤类似)
    2. 调用wx.login接口, 获得一个code
    3. 拿到加密数据之后, 调用后台服务器接口, 把加密数据和 code 传过去

    4. 服务器获得传过去的加密数据之后，对数据进行解密(调用腾讯相关接口)，得到了手机号码，再返回给前端

      登录流程

    5. 获取用户信息(需要授权), 绑定点击事件

    6. 获取用户登录需要的code, 调用wx.login
    7. 调用后台登录接口, 传入参数
      1. iv, encryptedData, userInfo(这几个参数在第1步里获得)
      2. code(这个参数在第2步里获得)
    8. 登录成功后获得token
      1. 重置token信息, 以更新当前页面用户状态
      2. 把token存储在缓存里
      3. 调用的接口的时候把token放在请求头上(详看请求封装)
        1. <text bindtap="login">立即登录</text>
        ```javascript Page({

    页面的初始数据

    data: { token: ‘’ },

    登录

    async login() {

    获取用户信息

    let userData = await this.getUserInfo();

    获取code,这行代码不能放在获取用户信息之前

    let code = await this.getCode(); let data = {

    1. code,
    2. iv: userData.iv,
    3. encryptedData: userData.encryptedData,
    4. userInfo: userData.userInfo,

    }

    调用后台登录接口, 传入数据

    app.$post(‘/user/wxlogin’, data).then(res=> {

    1. let token = res.result.token;
    2. this.setData({
    3.   token: token
    4. }) 
    6. # 把token放入缓存
    7. wx.setStorageSync('token', token);

    }).catch(err=> {

    1. console.log(err);

    }) },

获取code

getCode() { return new Promise((resolve, reject) => {

  1.   # 获取code(调用微信接口需要)
  2.   wx.login({
  3.     success(res) {
  5.       # 成功之后, 把code保存起来
  6.       resolve(res.code);
  7.     },
  8.     fail(err) {
  9.       reject(err);
  10.     }
  11.   })
  12. })

},

获取用户信息

getUserInfo() {

  1. # 调起用户授权界面,获取用户信息
  2. return new Promise((resolve, reject) => {
  3.   wx.getUserProfile({
  4.     desc: '用于完善会员资料',
  5.     success: (res) => {
  7.       # 成功之后,保存用户信息
  8.       resolve(res);
  9.     },
  10.     fail(err) {
  11.       reject(err);
  12.     }
  13.   })
  14. });

} })

获取缓存里的token, 登录成的时候放入的

let token = wx.getStorageSync(“token”); url = baseUrl + url; return new Promise((resolve, reject) => {

请求

wx.request({ url, method, data,

  1. # 把token放入请求头
  2. header: {
  3.   "user-token": token
  4. },

}) } 

  1. <a name="iFGbg"></a>
  2. ### 地图选址
  4. - [文档地址](https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker)
  5. - [申请开发者密钥(key)](https://lbs.qq.com/dev/console/key/add)
  6. 1. 在 app.json 里添加插件
  7.    - 引入插件包： 地图选点 `appId:  wx76a9a06e5b4e693e`
  8. ```json
  9. {
  10.   "plugins": {
  11.     "chooseLocation": {
  12.       "version": "1.0.6",
  13.       "provider": "wx76a9a06e5b4e693e"
  14.     }
  15.   }
  16. }
  • 设置定位授权
    1. {
    2. "permission": {
    3. "scope.userLocation": {
    4.  "desc": "你的位置信息将用于小程序定位"
    5. }
    6. }
    7. }

  1. 使用插件

    1. <button bindtap="getAddress">获取地址</button>
    2. <view class="mt-10">{{address}}</view>

    ```javascript const chooseLocation = requirePlugin(‘chooseLocation’); Page({ data: { address: ‘’, latitude: ‘’, longitude:’’ },

    getAddress() {

    使用在腾讯位置服务申请的key

    const key = ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’;

    调用插件的app的名称

    const referer = ‘花间小程序’; const location = JSON.stringify({ latitude: this.data.latitude, longitude: this.data.longitude }); const category = ‘生活服务,娱乐休闲’; wx.navigateTo({ url: ‘plugin://chooseLocation/index?key=’ + key + ‘&referer=’ + referer + ‘&location=’ + location + ‘&category=’ + category }); },

onShow() {

  1. # 获取当前位置
  2. wx.getLocation({
  3.   type: 'wgs84',
  4.   success :(res)=> {  
  5.     this.setData({
  6.       latitude : res.latitude,
  7.       longitude : res.longitude
  8.     }) 
  9.   }
  10.  })
  12. # 选址结束后, 点击确认返回本页面, 下面的代码就能获取选中的地址信息
  13. const location = chooseLocation.getLocation(); 
  14. this.setData({
  15.   address: location && location.name;
  16. })

} })

  1. <a name="JnYfe"></a>
  2. ### 支付流程
  4. - [csdn 参考文档](https://blog.csdn.net/qq_38378384/article/details/80882980)
  5. - [简书 参考文档](https://www.jianshu.com/p/0835f03c3543)
  6. 1. 步骤: 
  7.    1. 小程序端请求后端创建订单，把需要的参数传给后台
  8.    1. 后端调用小程序统一下单的 API，获取预支付订单信息，给前端返回预支付信息
  9.       1. [小程序支付流流程](https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3)
  10.       1. [统一下单 api](https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1)
  11.       1. 给前端返回支付所需参数
  12.    3. 小程序端使用 wx.requestPayment 调起支付窗口
  13.       1. [文档地址](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html)
  14.       1. 举例：
  15. ```javascript
  16. <button bindtap="submit">提价订单</button>
  18. const app = getApp();
  19. Page({ 
  20.   submit() {
  21.     app.$post('/order/create').then(res => {
  22.       let obj = res.result;
  24.       # 调用商户端下单接口成功后, 获取所需参数
  25.       # 调起微信支付窗口, 传入所需参数
  26.       wx.requestPayment({
  27.         # 时间戳
  28.         timeStamp: obj.timeStamp,
  30.         # 随机字符串
  31.         nonceStr: obj.nonceStr,
  33.         # 统一下单接口返回的 prepay_id 参数值
  34.         package: obj.package,
  36.         # 签名类型
  37.         signType: obj.signType,
  39.         # 签名
  40.         paySign: obj.paySign,
  42.         # 支付成功的回调
  43.         success(res) {
  44.           console.log(res);
  45.         },
  47.         # 支付失败的回调
  48.         fail(err) {
  49.           console.log(err);
  50.         },
  51.       });
  52.     })
  53.   },
  54. })
  1. 小程序端查询支付结果，获取结果后给用户展示支付结果
  • 获取支付结果
    1. 方式1: 小程序端轮询商户端获得支付结果
    2. 方式2: 小程序使用socket监听商户服务器socket接口,商户端给小程序推送接口
    3. 相对而言, 使用轮询会消耗一定的性能, 服务器支持的话, 尽量还是使用socket
  • 展示支付结果
    1. 小程序支付模式图

wxa-7-2.jpg

socket

  • http 请求是单向, 服务器不能给web发信息, 而 socket 的双向的, 可以互发信息
  • 微信支付可以使用 socket 由服务器给前端推送支付结果
  1. 服务器端代码
    • app.js ```javascript const Koa = require(“koa”); const path = require(“path”); const websockify = require(“koa-websocket”); const app = websockify(new Koa()); const serv = require(“koa-static”); app.use(serv(__dirname + “/public”));

app.ws.use((ctx, next) => {

给前端发信息

let count = 1; setInterval(() => { ctx.websocket.send( ${count++}. 万能的朋友圈, 想入手一个机械键盘,有没有推荐的, 我两秒后再来问 ); }, 2000);

监听前端发来的信息

ctx.websocket.on(“message”, function (message) { console.log(message); }); });

app.listen(3000,()=>{ console.log(‘http://localhost:3000‘); });

  2.    - 根目录创建 public 目录, 然后创建 index.html 文件
  3. ```javascript
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>Document</title>
  11. </head>
  12. <body>
  14.     <script>
  15.       // 创建sock
  16.         var ws = new WebSocket("ws://localhost:3000");
  17.         ws.onopen = function (evt) {
  18.             console.log("连接成功");
  19.             ws.send("我是张三");
  20.         };
  21.             // 监听服务器信息
  22.         ws.onmessage = function (evt) {
  23.             document.write("收到服务器端发来的信息: " + evt.data+'<br/>');
  24.         };
  26.         ws.onclose = function (evt) {
  27.             console.log("Connection closed.");
  28.         };
  29.     </script>
  30. </body>
  31. </html>

  • 小程序代码

    1. Page({
    2. onShow() {
    4. # 连接socket
    5. wx.connectSocket({
    6.  url: 'ws://localhost:3000'
    7. }),
    9. # 监听连接状态
    10. wx.onSocketOpen(function (res) {
    11.  console.log('socket 已連接')
    12. }),
    14. # 监听服务器信息
    15. wx.onSocketMessage(res=> {
    16.  console.log(res);
    17. }),
    18. }
    19. }

    自定义组件

  • 以购物车的结算栏为例
  1. 创建组件
    1. 右键点击开发工具中的 components => 新建目录 count
    2. 右键 count 目录 => 新建组件 => 输入 count(组件的名称)

  2. 编写静态文件

    • wxml文件 ```html 合计 ¥99.00

    结算 

    2. - wxss文件
    3. ```css
    4. page {
    5. background: #ebebeb;
    6. }
    7. .count-box {
    8. height: 45px;
    9. background: #fff;
    10. position: fixed;
    11. bottom: 0;
    12. width: 100%;
    13. display: flex;
    14. justify-content: space-between;
    15. padding-left: 20px;
    16. align-items: center;
    17. font-size: 16px;
    18. }
    19. .count-box .money {
    20. color: #e1544d;
    21. margin-left: 5px;
    22. }
    23. .count-box .total {
    24. color: #666;
    25. }
    26. .count-box .count {
    27. text-align: center;
    28. line-height: 45px;
    29. background: #e1544d;
    30. width: 120px;
    31. color: #fff;
    32. }
  1. // js文件暂且不动

  1. 使用组件

    1. 新建一个页面,名字随意,比如 shopCart,
    2. 编写 shopCart 页面的代码
      1. // shopCart.json代码,注册组件
      2. {
      3. "usingComponents": {
      4. "count": "../../components/count/count"
      5. }
      6. }
      1. <!-- shopCart.wxml 代码 -->
      2. <count></count>
      1. // js也暂时不动

  2. 至此我们已经能在 shopCart 页面看到了 count 组件展示出来的内容了

(四) 父给子传参

  1. shopCart.wxml(父组件) 添加一个总价 totalMoney

    1. <count totalMoney="99.99"></count>
    2. // 如果要传变量,请使用
    3. <count totalMoney="{{xxx}}"></count>

  2. count(子组件) 组件接收参数,需要改动两个地方

    • 修改 count.js 文件,在 properties 里添加 ```javascript properties: { totalMoney: Number },

    // 或者写成这样 properties: { totalMoney: {

    1.  type: Number,
    2.  default: '0.00'

    } }, ```

  • 修改 count.wxml
  1. <count totalMoney="{{totalMoney}}"></count>

(五) 事件和自组件传参

  1. shopCart.wxml(父组件) 自定义一个事件,同时给这个事件绑定一个函数

    1. <count totalMoney="99.00" bind:submit="onSubmit"></count>

  2. shopCart.js(父组件) 编写 onSubmit 函数,event.detail 接收子组件传来的数据

    1. onSubmit(event) {
    2.  console.log(event.detail);
    3. },

  3. 修改 count.wxml(子组件), 绑定点击事件

    1. <!-- wxml -->
    2. <view class="count-box">
    3. <view>
    4.  <text class="total">合计</text>
    5.  <text class="money">¥{{totalMoney}}</text>
    6. </view>
    8. <view class="count" bindtap="handleClick">
    9.  结算
    10. </view>
    11. </view>

  4. 修改 count.js(子组件), 在 methods 添加 handleClick,使用 triggerEvent 触发父组件的自定义事件

    1. methods: {
    2.  handlClick() {
    3.    this.triggerEvent('submit',{name:'老胡',age: 100})
    4.  }
    5. }

  5. 点击结算的时候,父组件的自定义就被触发,控制台打印出{name:’老胡’,age: 100}

(六) 完整代码

自定义组件(子组件)

  1. // count.xml
  3. <view class="count-box">
  4.   <view>
  5.     <text class="total">合计</text>
  6.     <text class="money">¥{{totalMoney}}</text>
  7.   </view>
  9.   <view class="count" bindtap="handleClick">
  10.     结算
  11.   </view>
  12. </view>
  15. // count.wxss
  16. page {
  17.   background: #ebebeb;
  18. }
  19. .count-box {
  20.   height: 45px;
  21.   background: #fff;
  22.   position: fixed;
  23.   bottom: 0;
  24.   width: 100%;
  25.   display: flex;
  26.   justify-content: space-between;
  27.   padding-left: 20px;
  28.   align-items: center;
  29.   font-size: 16px;
  30. }
  31. .count-box .money {
  32.   color: #e1544d;
  33.   margin-left: 5px;
  34. }
  35. .count-box .total {
  36.   color: #666;
  37. }
  38. .count-box .count {
  39.   text-align: center;
  40.   line-height: 45px;
  41.   background: #e1544d;
  42.   width: 120px;
  43.   color: #fff;
  44. }
  47. // count.js
  48. Component({
  49.   /**
  50.    * 组件的属性列表
  51.    */
  52.   properties: {
  53.     totalMoney: Number
  54.   },
  56.   /**
  57.    * 组件的初始数据
  58.    */
  59.   data: {},
  61.   /**
  62.    * 组件的方法列表
  63.    */
  64.   methods: {
  65.     handleClick() {
  66.       this.triggerEvent("submit", { name: "老胡", age: 100 });
  67.     }
  68.   }
  69. });

父组件

  1. // shopCart.wxml
  2. <count totalMoney="{{totalMoney}}" bind:submit="onSubmit" />;
  4. // shopCart.js
  5. Page({
  6.   data: {
  7.     totalMoney: 10000,
  8.   },
  10.   onSubmit(data) {
  11.     console.log("data", data.detail);
  12.   },
  13. });