微信小程序总结

css

• 本地资源无法通过 WXSS 获取，
  background-image：可以使用网络图片，或者 base64，或者使用image标签

• 能使用calc:height: calc(100% - 100rpx);

• 官方组件的样式可以通过!important覆盖

• button组件默认都加了一个border，该button控件上有一个伪元素（::after），设置了border，只要把button::after 的border 属性去掉就可以了，

  /*去掉按钮边框*/
  button::after {
    border: 0;
  } 
  /*去掉button默认样式*/
  button {
    border-radius: 0;
    background-color: transparent;
    padding: 0;
    margin: 0;
  }
  

• 修改radio框的样式:先把radio组件隐藏起来，自己写自定义样式和选中样式，再在data中设置一个选中的变量，来显示是否显示选中样式

  <radio-group class="radioGroup" bindchange="radioChange">
    <label class="radio" wx:for="{{items}}" wx:key="id">
      <!-- 自定义的radio样式 -->
      <view class='radioPoint'>
        <view class='radioDefault'>
          <view class="{{radioCheckVal==item.id?'radioActive':''}}"></view>
        </view>
      </view>
      <view class='radioText'> {{item.value}}</view>
      <!-- 隐藏默认的radio样式 -->
      <radio value="{{item.id}}" hidden="true" checked="{{item.checked}}" />
    </label>
  </radio-group>
  

  Page({
    /* 页面的初始数据 */
    data: {
      items: [
        { id: 1, value: '选项1' },
        { id: 2, value: '选项2' },
      ],
      radioCheckVal: null
    },
    radioChange: function (e) {
      this.setData({
        radioCheckVal: e.detail.value
      })
    },
  })
  

• 在微信小程序内的文字无法长按复制，除了text节点以外。但要在text标签内加一个“selectable”属性。 <text selectable='true' ><text/>

js

• setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

  1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
  2. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
  3. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

• 小程序里面的打开的页面，请求需要是https协议，websocket协议需要是wss协议

• 按小程序右上角退出小程序和按home键退出微信，小程序里面的ws连接都不会断

• 小程序通过按钮点击分享，无法做到先发起网络请求获取某些信息再进行分享的功能，因为onShareAppMessage方法必须要return一个对象，不能放在wx.request回调里面return，必须事先获取。

  //分享到个人/群判断方法
  Page({
      onShareAppMessage: function () {
        //设置withShareTicket: true才能获取shareTickets信息
        wx.showShareMenu({
          withShareTicket: true
        })
        return {
          title: '分享标题',
          path: '/pages/index/index',
          imageUrl: '',
          success: (res) => {
            // 转发成功
            if (res.hasOwnProperty('shareTickets')) {
              // 转发到群
              wx.getShareInfo({
                shareTicket: res.shareTickets[0],
                success: (res) => {
                  //encryptedData,iv发送给后台解密，获取到openGId
                },
                fail: function (res) {
                  console.log('获取微信分享信息失败')
                }
              })
            }
            else {
              // 转发到个人
            }
          },
          fail: function (res) {
            // 转发失败
          }
        }
      },
    })
  

• 隐藏小程序导航栏方法，在app.json中配置navigationStyle：

  {
    "pages": [],
    "window": {
      "navigationStyle": "custom"
    }
  }
  

• 微信sdk分享的链接中不能含有中文字符，否则不能自定义分享，一定要把分享的链接encode一下

• 处理退出小程序的操作：目前没有提供这样的接口，但是可以用wx.navigateBack()做处理，将跳转层级设为最大跳转数量即可。wx.navigateBack({delta:20})

• 涉及到经常切换的需要用hidden来实现样式切换，不要用wx:if，用这个切换的时候会导致闪烁问题

• 自定义组件里面的wxss不会影响到页面的样式，所以不能继承自定义组件里面的样式

• 获取dataset:获取最外层dataset通过event.currentTarget.dataset就可以获取，里面的子元素就不用写上data-，而不用event.target.dataset获取

    <view class="btn" bindtap="tapNav" data-nav="1">
    </view>
  
    <view class="btn" bindtap="tapNav" data-nav="1">
      <view data-nav="2"></view>
    </view>
  
    // 读取当前执行事件的view data-nav值打印出来
    // 第一个打出1
    // 第二个如果点击的位置是子view的话，会打印出2.
    tapNav:function(event){
      console.log(event.target.dataset.nav) //2
      console.log(event.currentTarget.dataset.nav) //1
    },
  

• 生命周期执行顺序：onLoad->onShow->onReady

• 授权和登录是两回事。登录是用户无感知的，获取到code 和后端通信获得openid来定位用户。而授权才能获取用户头像和名字等信息

• 在不授权的情况下，可以通过open-data获取用户基本信息，在微信6.6.1版本中获取不了，并且基础库1.9.90版本才开始支持，遇到需要显示用户信息的地方还是需要手动授权，不能依赖于open-data。

  <button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>
  

• 无论是bindscrolltoupper 还是 bindscrolltoupper做上拉下拉刷新都需要注意这两个事件是会多次调用的。需要一个标识符来拦截多次调用。下拉刷新建议用 page 的

• this.setData()修改数据是异步的，因此不能用它来做上下拉刷新的标识符

• 页面路径只能是五层，请尽量避免多层级的交互方式。

• 路由传递参数bug: 比较长的字符串作为参数应该放在最后。

    const TestUserData = {
      header: "https://pic.qiushibaike.com/system/avtnew/3422/34228569/thumb/20170914201113.JPEG?imageView2/1/w/90/h/90",
      name: "哈哈哈哈",
      text: "红鲤鱼和绿鲤鱼与驴",
    }
    // 跳转之后只能读取到header
    wx.navigateTo({
      url: `../result/result?header=${TestUserData.header}&name=${TestUserData.name}&text=${TestUserData.text}`,
    })
    // 跳转之后三个参数都能读取
    wx.navigateTo({
      url: `../result/result?name=${TestUserData.name}&text=${TestUserData.text}&header=${TestUserData.header}`,
    })
  

• 授权弹窗如果用户很久不响应的话，就会调用失败

• transform: translate(0,100rpx);一个绝对定位的布局会撑开page节点

• 路由跳转bug:经过测试，因为页面跳转是有动画时效的，在动画进行中当前页面还能操作。如果双击当前跳转按钮机会进行两次跳转。第二次点击的时候小程序内置的路由栈是已经定位到了新的页面了，而这时候在按照原来的路由栈去定位当前页面，因此会报错。所以页面跳转按钮需要进行短时间多次点击的限制

素材

• 素材引入使用相对路径
• 支持image内src放置svg。但是不支持直接在wxml里面直接使用svg
• 录音音频，旧版的是silk格式,和公众号开发的时候一致。而新版可以自己选择aac