背景知识

微信小程序是可以通过点击右上角的menu来进行分享(转发)的。但是代码里面不可以写个公共函数来调用，必须每个页面写一遍，这就使得代码冗余了，业务修改的时候必须全都修改一遍，很容易忘记某一页。下面通过一种方法，先写一个公共的Page函数，在公共的Page里面写入分享代码，然后在具体的页面调用使用这个公共Page函数实现分享。

建立公共Page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

export default function (options = {}) {
  return Page({
    onShareAppMessage(res) {
      if (res.from === 'menu') {
        // 来自右上角分享菜单
        return {
          title: '分享标题',
          path: '页面路径',
          imageUrl: '分享图片路径'
        }
      }
    },
    ...options
  });
}

URI编码问题

在进行GET提交参数的时候，如果参数中有中文，记得要进行URI编码，encodeURI(参数) 如果不进行编码，ios设备正常。安卓设备会可能出现获取不到参数的情况。

新特性支持情况

有些新特性可能会只支持高版本，对于低版本不支持，开发的时候要看清楚官方文档。例如：icon组件的size属性从2.4.0基础库开始支持rpx属性。如果用户客户端基础库小于这个版本，就会出现无法显示的问题，从而影响业务。

封装请求

开发开始之前最好根据业务封装请求函数，这样会事半功倍。

我把小程序WebSocket的一些功能封装成一个类，里面包括建立连接、监听消息、发送消息、心跳检测、断线重连等等常用的功能。

借助一个 weapp-event 的第三方插件可以轻松实现小程序跨页面通信

原作者的这个插件有时候会出现发送两次的问题，为此我改良了一下

演示

功能

• 群聊，每个进入的用户都可以看到自己和他人的聊天记录

• 实时显示当前在线人数

• 自己发送的消息和他人有区分

背景

一个 tab 页面，每个页面的背景色是 #f4f4f4 数据都是动态的，数据会越来越多。当数据没有撑满屏幕的高度时，为了保证最外层的view的背景色是 #f4f4f4 。高度必须是屏幕高度的100%也就是100vh。如果数据撑开屏幕的高度的话，最外层view给高度可以是 auto 或者是 100% 。

wxml

1
2
3
4
5
6

<view>
  <block wx:for="{{test}}" wx:key="*this">
    <button type='primary' size='mini' bindtap='chageval' data-id='{{item.id}}'>{{item.name}}</button>
    <text>{{item.val}}</text>
  </block>
</view>