开发笔记

Appearance

常用文档 ​

弹框 ​

js
//显示等待框
function loading(title = "加载中...") {
    wx.showLoading({
        title: title,
        mask: true
    });
}

//隐藏等待框
function closeLoading() {
    wx.hideLoading();
};

//不显示图标，此时 title 文本最多可显示两行
function toast(msg) {
    _toast(msg, "none");
}

//显示失败图标，此时 title 文本最多显示7个汉字长度
function toastError(msg) {
    _toast(msg, "error");
}

//显示成功图标，此时 msg 文本最多显示7个汉字长度
function toastSuccess(msg) {
    _toast(msg, "success");
}

function _toast(msg = "操作成功", icon) {
    wx.showToast({
        title: msg,
        icon: icon
    });
}

//alert弹框
function alert(content = "操作成功", title = "提示", ) {
    return _modal(content, title, false);
}

//确认弹框
function confirm(content = "操作成功", title = "提示", ) {
    return _modal(content, title, true);
}

function _modal(content, title, showCancel) {
    return new Promise(function (resolve) {
        wx.showModal({
            title: title,
            content: content,
            showCancel: showCancel,
            complete(res) {
                resolve(res);
            }
        })
    })
}

export default {alert,confirm,toastError,toastSuccess,toast,loading,closeLoading}

网络请求 ​

发起请求 ​

  • 发起请求文档

  • 最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。

js
const app = getApp();
function request(url, data = {}, method = "GET", contentType = "application/x-www-form-urlencoded") {
  return new Promise(function (resolve) { 
    wx.request({
      url: app.globalData.baseUrl + url,
      data: data,
      method: method,
      header: {
        "content-type": contentType
      },
      complete: function (res) {
        if (res.statusCode == 200) {
          var obj = res.data;
          resolve(obj);
        } else {
          console.log(res);
          wx.showToast({
              title: "服务器异常，请稍后再试",
              icon: "none"
          });
        }
      }
    })
  })
}

function get(url, data) {
  return request(url, data);
}

function post(url, data) {
  return request(url, data, "POST");
}

function postJson(url, data) {
  return request(url, JSON.stringify(data), "POST", "application/json");
}

export default {get,post,postJson};

下载文件 ​

wx.downloadFile({
  	url: 'https://example.com/audio/123', //仅为示例，并非真实的资源
  	success (res) {
        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调
        if (res.statusCode === 200) {
          	wx.playVoice({
            	filePath: res.tempFilePath
          	})
        }
  	}
})

常用API ​

data操作

js
//获取data中数据
this.data.key

//设置data中数据
this.setData({key: value})

输入框双向绑定

js
onInputChange(e){
    this.setData({
        [e.target.dataset.name]: e.detail.value,
    })
},

验证码倒计时

js
let second = 60;
const timer = setInterval(() => {
    second--;
    if (second) {
        this.setData({
            smsMsg: `${second} 秒后重新发送`,
        });
    } else {
        clearInterval(timer);
        this.setData({
            smsMsg: '发送验证码',
        });
    }
}, 1000);

小程序分包 ​

app.json

json
{
    "pages": [
        "pages/home/home"

    ],
    "subpackages": [{
        "root": "pages-my",
        "name": "pages-my",
        "pages": [
            "test/test"
        ]
    }],
    "preloadRule": {
        "pages/home/home": {
            "network": "all",
            "packages": ["pages-my"]
        }
    },
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "测试",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

t-design ​

<t-input model:value="{{smsCode}}" clearable maxlength="4" type="number" label="验证码" placeholder="验证码">
  <t-button wx:if="{{second>0}}" disabled slot="suffix" theme="primary" size="extra-small">剩余{{second}}秒</t-button>
  <t-button wx:else bind:tap="sendSmsCode" slot="suffix" theme="primary" size="extra-small">发送验证码</t-button>
</t-input>

data: {
  smsCode: "",
  second: 0
}

//发送验证码
sendSmsCode() {
  dialog.loading();
  ajax.post("/public/sendSmsCode", {
    phoneNum: this.data.phoneNum
  }).then(res => {
    dialog.toast(res.msg);
    if (res.code === 1) {
      this.setData({
        second: 120
      });
      var timer = setInterval(() => {
        var second = this.data.second - 1;
        if (second < 1) {
          clearInterval(timer);
          second = 0;
        }
        this.setData({
          second
        })
      }, 1000)
    }
  })
},
text
confirmBtn: {
  content: "同意",
  openType: "agreePrivacyAuthorization",
  bindtap:()=>{
    return true;
  }
}

wx.openPrivacyContract();


wx.getPrivacySetting({
  success: res => {
    if (res.needAuthorization) {
      // 需要弹出隐私协议
      this.setData({
        dialogTitle: res.privacyContractName,
        dialogShow: true
      })
    }
  }
})