小程序开发实用总结

1 移除button默认样式

button {
  border: 0;
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  line-height:inherit;
}
button::after {
  display: none;
}

2 获取元素的自定义属性

let id = e.currentTarget.dataset['id'];

3 存取stroage

  wx.setStorageSync('user_id', xxx);
  wx.getStorageSync("user_id")

4 ios 重新进入小程序 app.js 里 onLaunch 不触发

解决办法把逻辑放在onShow 里执行

5 全局变量的设置，调用

//app.js
 globalData: {
    domain: 'xxx', 
    wechat_id: '',
    platform:'android'
  }
//页面内调用，组件内调用，设置
const app = getApp();
app.globalData.domain;
getApp().globalData.domain= 1;

6 监测全局变量的变化

借鉴vue的数据劫持 Object.defineProperty， get(), set() 方法

//监测 全局变量的 authdia 
// app.js 文件内添加
watch: function (method) {
    var obj = this.globalData;
    Object.defineProperty(obj, "authDia", {
      configurable: true,
      enumerable: true,
      set: function (value) {
        this._authDia = value;
        method(value);
      },
      get: function () {
        return this._authDia
      }
    })
  },
// 页面内使用
onLoad: function (options) {
    let that = this;
    getApp().watch(that.watchBack);
},
//观察全局数据变化
watchBack: function () {
    this.setData({
      authDia: app.globalData.authDia
    })
},

7 小程序组件开发

const app = getApp()
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    show: { //父组件传递过来的参数 定义type 设置默认值 观察值的变化
      type: [Number, String],
      value: 0,
      observer: function (newVal, oldVal, changedPath) {}
    }
  },
  data: {},
  lifetimes: {
    attached: function () {},//组件加载时候触发
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  methods: {} //页面内定义的方法
})

组件全局引用 app.json 中 页面内对应的页面json

"usingComponents": {
    "authDia": "/common/author_dialog/author_dialog",
  },

父组件向子组件传递数据，触发事件

//引用子组件 show是页面向组件传递的数据 
<authDia show="{{authDia}}" bind:updateData="updateData"></authDia>
// 父组件内写的方法
updateData(res) {
   xxx
},
//子组件内触发父组件内方法调用
 this.triggerEvent('updateData', 1)

8 微信支付

wx.requestPayment({
                  timeStamp: xxx,
                  nonceStr: xxx,
                  package: xxx,
                  signType: xxx,
                  paySign:xxx,
                  success: function (res) {
                    console.log(res);
                   // that.onLoad()
                  },
                  fail: function (res) {
                    console.log(res);
                  },
                  complete: function (res) {
                    console.log(res);
                  }
                })

微信支付调用所需要的的参数均有后端返回，前端处理回调逻辑