支付宝小程序开发

支付宝小程序开发

本文简单介绍开发支付宝小程序所需的工具、UI组件库的使用，以及全局方法注册，请求封装。

一、 基础准备

1. 开发文档、以及开发者工具
   开发指南、框架概述、小程序API、组件以及扩展组件、技术支持 & 案例 FAQ

   小程序开发者工具下载

2. 创建小程序
   a. 通过开发者平台创建
   b. 直接通过 ide 开发者工具创建空项目
   

当前所用小程序基础库为2.x版本

二、引入UI组件库

目前该小程序仅支持使用 Ant-Design-Mini

1. 下载依赖

 npm i antd-mini -S

2. 开启 component2

⚠️ 从 2.11.0 版本起，需要小程序开启 component2，开启后小程序自定义组件会使用新的生命周期运行模式。

开启方法：在 IDE 中的 详情 > 项目配置 中，勾选 启用 component2 编译。

3. 在页面 json 文件中引入组件

{
  "usingComponents": {
    "ant-button": "antd-mini/es/Button/index"
  }
}

⚠️ 详情可以参考 升级到 v2

4. 在 axml 文件中使用

<ant-button>我是一个按钮</ant-button>

三、注册全局方法

• commonFun.js (常用公共方法 )

// 为了避免和别的项目存储冲突，缓存内容之前拼接特定的项目名称
let storagePath = 'test-app-'; 

export default {
  // 是不是空字符
  isNullStr: function (str) {
    return str === null || str === undefined || str === "" || str === "null" || str === "undefined";
  },
  // 对象反序列化
  jsonPS(obj, type) {
    if (type === 'str') {
      return JSON.stringify(obj);
    } else if (type === 'obj') {
      return JSON.parse(obj);
    }
    return JSON.parse(JSON.stringify(obj));
  },
  /* 存储全局信息
   * @params  key         存储的字段
   * @params  data         存储的数据
   */
  setLocal(key, data) {
    key = storagePath + key;
    my.setStorageSync({
      key,
      data
    });
  },
  /* 获取全局信息
   * @params  key        存储的字段
   */
  getLocal(key) {
    key = storagePath + key;
    let res = my.getStorageSync({
      key
    });
    return res.data;
  },
  /* 获取全局信息
   * @params  key        存储的字段
   */
  removeLocal(key) {
    key = storagePath + key;
    my.removeStorageSync({
      key
    });
  },
  /**
   * 格式化日期
   * @param {Date, String, Number} Date  要转换单位的数字
   * @param {String} fmt 转换格式 yyyy-MM-dd hh:mm:ss (可随意组合)
   * @return {String}
   */
  formatDate(date, fmt = 'yyyy-MM-dd hh:mm:ss') {
    if (!date) return '';
    date = new Date(date);
    let o = {
      "M+": date.getMonth() + 1, //月份
      "d+": date.getDate(), //日
      "h+": date.getHours(), //小时
      "m+": date.getMinutes(), //分
      "s+": date.getSeconds(), //秒
      "q+": Math.floor((date.getMonth() + 3) / 3), //季度
      "S": date.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (let k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  },
  /**
   * 16进制转换为RGB
   * srt      16进制
   * opacity   透明度（ RGBA格式 ）
   * noUnit   是否需要单位
   */
  set16ToRgb(str, opacity, notUnit) {
    let reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/
    if (!reg.test(str)) {
      return;
    }
    let newStr = (str.toLowerCase()).replace(/\#/g, '')
    let len = newStr.length;
    if (len == 3) {
      let t = ''
      for (let i = 0; i < len; i++) {
        t += newStr.slice(i, i + 1).concat(newStr.slice(i, i + 1))
      }
      newStr = t
    }
    let arr = []; //将字符串分隔，两个两个的分隔
    for (let i = 0; i < 6; i = i + 2) {
      let s = newStr.slice(i, i + 2)
      arr.push(parseInt("0x" + s))
    }

    let isOpacity = !this.isNullStr(opacity);
    if (isOpacity) {
      arr.push(opacity);
    }
    let arrVal = arr.join(",");
    let lastValue = isOpacity ? arrVal : arrVal;
    if (notUnit) {
      return lastValue;
    }
    return `${isOpacity ? 'rgba' : 'rgb'}(${lastValue})`;
  },
  //千分位
  filter_q(num) {
    if (this.isNullStr(num)) return '';
    return (num || 0).toString().replace(/\d+/, function (n) {
      let len = n.length;
      if (len % 3 === 0) {
        return n.replace(/(\d{3})/g, ',$1').slice(1);
      } else {
        return n.slice(0, len % 3) + n.slice(len % 3).replace(/(\d{3})/g, ',$1');
      }
    });
  }
}

• axios.js (请求封装)

import commonFun from './commonFun'

export default {
  // get 请求
  get(postUrl, params) {
 	// 请求添加token
    let token = commonFun.getLocal('token');
    return new Promise((resolve) => {
      my.request({
        url: postUrl,
        method: 'GET',
        data: params,
        headers: {
          'content-type': 'application/json', //默认值
          'Authorization': token ? `Bearer ${token}` : ''
        },
        dataType: 'json',
        success: function (res) {
          resolve(res.data);
        },
        fail: function (error) {
          console.error('fail: ', JSON.stringify(error));
          // my.alert({ content: 'complete' });
        },
        complete: function (res) {
          my.hideLoading();
        },
      });
    })
  },
  // post json 请求
  jpost(postUrl, params) {
    let token = commonFun.getLocal('token');
    return new Promise((resolve) => {
      my.request({
        url: postUrl,
        method: 'POST',
        data: params,
        headers: {
          'content-type': 'application/json', //默认值
          'Authorization': token ? `Bearer ${token}` : ''
        },
        dataType: 'json',
        success: function (res) {
          resolve(res.data);
        },
        fail: function (error) {
          console.error('fail: ', JSON.stringify(error));
          // my.alert({ content: 'complete' });
        },
        complete: function (res) {
          my.hideLoading();
        },
      });
    })
  }
}

• page.js (请求使用方法)

const app = getApp(); // 获取已经注册的全局方法

Page({
  data: {
    count: 0
  },
  onLoad() {

  },
  queryDataInfo() {
    let params = {
      userId: 'admin'
    }
    app.$jpost('你的接口', params).then(res => {
      // 出参，在此进行操作处理
      console.log(res);

      // 错误写法
      // this.count = res.count;

      // 正确写法，只有 setData 才会同步更新
      this.setData({
        count: res.count
      })
    })
  }
});

小程序中不能使用document.getElementById(‘ID’)获取节点信息

小程序常用语法地址：

1. AXML 介绍
2. 数据绑定
3. 条件渲染 if、else-if、else
4. 列表渲染 for循环使用
5. 使用模板 template (相当于自定义组件)
6. 引用 (import、include)
7. 自定义组件开发 重点

基础api，开发之前必看 文档地址

❤️‍🔥❤️‍🔥❤️‍🔥
小程序开发涉及的内容非常广泛，需要我们大家不断探索、学习和实践。希望大家能够在这条道路上慷慨以囊，相互交流经验，巩固自己的知识体系，结交更多的技术伙伴，扩大自己的人脉和技术交流圈子。
最后，祝愿大家能在开发的道路越走越远！！！
❤️‍🔥❤️‍🔥❤️‍🔥