微信小程序学习记录

于长野

记录一下小程序的坑

于长野

表达式

<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{10%2===0?"偶数":"奇数"}}</view>
从上到下结果分别是：2，11，偶数

于长野

输入框赋值给 data 数据

正确写法为在输入框的绑定事件里写入，num 为 data 中已存在的数据
this.setData({
     num:e.detail.value
})

于长野

checkbox 布尔值的使用问题

小程序使用布尔类型充当属性时，字符串和花括号之间不能存在空格，否则会导致识别失败
<checkbox checked="{{false}}"> </checkbox>

于长野

页面携带数据跳转

navigator 应该这样写
<navigator url="/page/navigate/navigate?title=新页面" >跳转到新页面</navigator>
支持data中的数据
<navigator url="/page/navigate/navigate?title={{title}}">跳转到新页面</navigator>
多个参数用&连接
<navigator url="/page/navigate/navigate?title=新页面&name={{name}}" >跳转到新页面</navigator>
页面二
data: {
    title:'',
    name:''
  },

onLoad: function(options) {
    this.setData({
      title: options.title,
      name:options.name
    })
  }
但是传递的参数只支持字符串，数组和对象参数需要转换为字符串才能传参，传参后转换回去就好了。

于长野

DarkMode

WXSS 适配

WXSS中，支持通过媒体查询 prefers-color-scheme 适配不同主题，与 Web 中适配方式一致，例如：

/* 一般情况下的样式 begin */
.some-background {
    background: white;
}
.some-text {
    color: black;
}
/* 一般情况下的样式 end */

@media (prefers-color-scheme: dark) {
    /* DarkMode 下的样式 start */
    .some-background {
        background: #1b1b1b;
    }
    .some-text {
        color: #ffffff;
    }
    /* DarkMode 下的样式 end */
}

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html

于长野

获取用户信息

想要直接展示用户信息很方便，有专门的 open-data 接口，用法如下：

<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>

官方文档
但是想要获取并保存用户信息就没有这么简单了，需要用到新的接口API。

简单说个事情，微信预计在 2021.04.13 后取消 wx.getuserInfo() 接口的获取用户信息功能，未来这个接口还可以调用，但是不会再有请求用户信息的弹窗，默认静默获取到匿名的用户信息。
{
  "userInfo": {
    "avatarUrl": "一个指向灰色头像的 URL",
    "city": "",
    "country": "",
    "gender": 0,
    "language": "",
    "nickName": "微信用户",
    "province": ""
  },
  "rawData": "userInfo字段的字符串格式",
  "encryptedData": "这个数据解密之后可以获得匿名的 userInfo，以及真实的 unionid、openid",
  "cloudID": "如果开通了小程序云开发，还会返回这个数据"
}

微信推出了新的获取用户信息的接口：`wx.getUserProfile()`

它和以前的 <button open-type="getUserInfo">授权</button> 有以下区别。

以前的 button 组件，如果用户从未授权，点击之后会弹窗询问授权，但是如果用户过去已经授权过，再点击不会弹窗，而是直接向开发者返回 userInfo；
而 wx.getUserProfile() 无论用户是否曾经同意授权，任何一次点击，都会弹窗询问授权，每一次都需要用户同意，才能返回 userInfo；
wx.getUserProfile() 返回的数据只有 userInfo 字段，没有 rawData、CloudID、encryptedData 等数据；

示例代码：

//wxml内容
<view class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>

//对应js文件内容
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})

由于每次调用不管是否已经获取过用户信息都会有弹框，建议获取后保存信息到数据库，减少获取用户信息的弹框次数，下次需要时，直接判断下用户openID是否匹配，直接调用数据库保存的信息。