微信小程序代码片段

微信小程序

---

第一个小程序做完了。然后做了这些记录

slot使用

// 自定义组件中
options: {
	multipleSlots: true
},
// 定义插槽  <slot name="logo"></slot>
    
// 使用插槽   <view slot="logo"> babal </view>

状态栏高度

wx.getSystemInfoSync()['statusBarHeight']

菜单信息（右上角胶囊按钮）

wx.getMenuButtonBoundingClientRect()  

wx:for的坑

// wx:for="{{ navList }}" wx:key="id" // 不要双花不要键 
// wx:for-item="list"  // 改默认循环项item为list
// wx:for-index="i" // 改默认循环索引index为i

获取手机号

// 这个能力需要配合按钮才行
//<button class="wechat" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">微信授权登录</button>

getPhoneNumber(e) {
    if(e.detail.errMsg === 'getPhoneNumber:fail user deny') { // 这就是请求被拒绝了啦
      wx.showToast({
        title: '取消授权',
        icon: 'error'
      })
    }else {
      console.log(e);
      // 这里做登录
      wx.setStorageSync('token', '11111111111111111111111111')
      wx.switchTab({
        url: '/pages/index/index'
      })
    }
  },

获取用户信息

// 需要双重用户确认
// <button class="phone" open-type="getUserInfo" bindgetuserinfo="getUserProfile">用户信息</button>

getUserProfile() {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.showModal({
      title: '获取用户信息展示用啦',
      content: '授权微信登录才能正常使用',
      cancelColor: 'cancelColor',
      success(res) {
        console.log(res);
        wx.getUserProfile({
          desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            console.log(res);
          },
          fail(err) {
            console.log(err);
          }
        })
      }
    })
  },

数据监听

observers: {
    'navData': function (val) { // 变量名
        this.setData({
            navList: val
        })
    }
},

组件通讯

//<class-nav bind你的名字="你的事件"></class-nav>
 this.triggerEvent('你的名字', 携带参数)
// <navbar shop-info="{{shopInfo}}" nav-data="{{classData}}" bind:你的名字="navChange"> 事件不要带花

页面通讯

wx.navigateTo({ // 有待url的都可以在url中拼接参数
    url: '/pages/order/order?id=1'
}）

指定页面的 onload方法的options参数中获取
              
wx.navigateTo({ // 一系列页面跳转方法中只有这个才有
    url: '/pages/order/order',
    success(res) {
        res.eventChannel.emit('shopInfo', { // 触发的事件名
            list: [that.data.goodData], // 携带参数
            price: that.data.goodData.price
        })
    }
})

const eventChannel = this.getOpenerEventChannel(); // 监听事件
eventChannel.on('shopInfo', (res) => { // res就是传过来的数据
    console.log(res);
    this.setData({
        addressData: res.data,
        address_id: res.data.id
    })
})

跳转&页面栈

// 跳转涉及页面栈管理，小程序页面栈只有10个，要合理利用几个路由跳转的的方法管理页面栈
const pages = getCurrentPages() // pages就是页面栈

wx.navigateTo({ // 新增页面 跳转非tabbar
    url: '/pages/phonelogin/phonelogin',
})

wx.switchTab({ // 卸载所有页面 跳转tabbar
    url: '/pages/index/index',
})

wx.navigateBack({ // 去掉本页面 返回上一级
    delta: 1, // 2 返回上两级 以此类推
})

wx.redirectTo({ // 卸载本页面，跳转新页面
    url: 'url',
})

wx.reLaunch({ // 卸载所有页面，跳转指定页面
    url: 'url',
})

网络请求

//   
wx.request({
      url, // 请求地址
      header: {
        token // 请求头携带数据
      },
      data, // 携带参数
      method, // 方法 POST GET
      success(res) { // 成功回调
        const {data} = res
        if( data.code === 200) {
          resolve(data.data)
        }else {
          reject(data)
        }
      },
      fail(err) { // 失败回调
        reject(err) 
      }
    }) // 还有一个成功失败都会做的回调

信息提示

wx.showLoading({ // 显示加载
    title: '加载中',
})
wx.hideLoading() // 移除加载

wx.showToast({ // 文字提示框
    title: '商品找不到了,即将返回',
    icon: 'none',
    success() {
        wx.navigateBack({
            delta: 1
        })
        clearTimeout(timer)
    }
})

wx.showModal({ // 文字提示交互框
    showCancel: true,
    title: '前往登录',
    success: (result) => {
        if (result.confirm) {
            wx.navigateTo({
                url: '/pages/login/login',
            })
        }
    }
})

获取app实例

// 可以将这个app实例(app.js)用作全局数据维护
const app = getApp()
// app.globalData.xxx
// app.fun()

导入微信地址

wx.chooseAddress({
    success(res) {
		// res就是地址数据
    }
})

事件传递参数

// <van-icon catchtap="editAddress" data-id="{{item.id}}" name="edit" />

editAddress(e) {
    const { id } = e.currentTarget.dataset
}

查询节点对象

 const query = wx.createSelectorQuery() // query 大概是页面dom节点
 query.select('.page').boundingClientRect(pageH => {
     query.select('.header').boundingClientRect(headH => {
         resolve(pageH.height - headH.height)
     }).exec()
 }).exec();

获取刘海高度

wx.getSystemInfoSync()['statusBarHeight'] // 单位是px

支付流程

// 点击提交订单 => 服务器返回支付信息 => 拿到支付信息亲求微信支付接口 => 用户支付 => 支付完成
wx.requestPayment({
    timeStamp: payData?.timeStamp,  // payData 是提交订单后返回的支付信息
    nonceStr: payData?.nonceStr,
    package: payData?.package,
    signType: payData?.signType,
    paySign: payData?.paySign,
    success(res) { // 支付成功
	    wx.redirectTo({
    		url: '/pages/indentdetail/orderdetail?id=${id}&bn=2'
		})
	},
	fail(err) { // 支付失败
		console.log(err);
	}
})

完： 有不对的地方烦请指出