微信小程序开发实战记录

近期公司需要开发一个小程序项目，时间非常紧急，在开发过程中遇到几个困扰的问题及解决方案，记录如下：

小程序框架选择

• 基础框架：小程序原生框架 + sass
• ui： 采用 vant weapp
• 图表：采用 ec-echarts

1 微信小程序 打开问卷星

小程序功能中有一个满意度调查的功能，不是原生功能，而是使用三方的问卷星网页链接，我们知道，小程序中需要嵌套网页的话，其中一条要求就是需要在网站的根目录下存放校验文件，但我们不可能在问卷星网站下去存放校验文件，所以这个功能当时陷入了困境，偶然查看问卷星的文档，发现其有小程序版同样可以使用问卷调查，但需要一个 activityId ，看格式与网页链接后缀中的一段 path 非常像，如下：

拿过来试了一下，发现真的可以使用，问题就此解决，代码如下：

2 微信小程序 wxs 使用正则的问题

因为小程序的机制，我们要在 wxml 中使用函数的话，只能通过 wxs 脚本的方式引入到页面中使用，在使用正则的时候，本人顺其自然的按照 js 中的语法使用正则，导致各种报错，还一头雾水，仔细阅读文档后发现，正则在小程序中的使用语法是不同的，需要使用自带的 getRegExp 方法，并且前后无需 / 作为开始、结束，方法包含两个参数，第一个为正则表达式的字符，第二个为正则的修饰符，代码如下：

var numberWithCommas = function (n) {
  return n.toString().replace(getRegExp('\B(?=(\d{3})+(?!\d))', 'g'), ',');
}

3 微信使用 echarts 层级问题

参考微信小程序，原生组件同层渲染：https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html#%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6%E5%90%8C%E5%B1%82%E6%B8%B2%E6%9F%93
在开发者工具中 echarts 的样式会重叠到其它组件上面，但真机中会正常显示，所以如果开发中能看得下去，就可以先不用管，解决方案的代码如下：

<view class="xc-bar">
   <!-- 目前在开发者工具中会有重叠的情况，真机不会 -->
   <ec-canvas canvas-id="xc-bar" ec="{{ ec }}" id="{{ecid}}"></ec-canvas> 
   <!-- 以下可以解决在开发者工具中重叠情况，暂无必要 -->
   <!-- <ec-canvas canvas-id="xc-bar" force-use-old-canvas ec="{{ ec }}" id="{{ecid}}"></ec-canvas> -->
</view>

4 h5 中判断是否在小程序环境中

项目中嵌入了h5 页面，在不同的环境中，某些功能是不同的，需要我们根据环境的不同来判断处理，判断方式如下，但有一个需要我们注意的问题：

export const isWx = () => {
    return new Promise(resolve => {
        try {
            if (window.__wxjs_environment === 'miniprogram') {
                resolve('mini-wx');
            } else {
                resolve('no-mini-wx');
            }
            // window.wx?.miniProgram.getEnv((res: IMini) => {
            //     if (res.miniprogram) {
            //         resolve('mini-wx');
            //     } else {
            //         resolve('no-mini-wx');
            //     }
            // });
        } catch (err) {
            resolve('no-mini-wx');
            console.log(err);
        }
    });
};

代码中判断的地方，都是官方文档所提供的，而被注释掉的部分，则是因为在某些情况下，getEnv 方法虽然存在，但并不会执行传入的方法，而导致 Promise 挂起，页面操作卡死。

5 嵌套 h5 中实现分享企微、微信和下载功能

项目中嵌入的h5有多个入口，包含分享功能，在app中可以通过bridge调起原生的分享、下载功能，但是在小程序中，因为平台限制的原因，不能调起小程序的 api,并且提供的jssdk也没有相关功能，所以在实现这个功能时，只能像淘宝等应用一样，把想要分享的数据，一键复制到粘贴板上，h5 粘贴复制的代码如下：

export const copyText = (text: string, cb?: () => unknown) => {
  const textarea = document.createElement('textarea'); // 创建一个 textarea 元素
  textarea.value = text; // 将要复制的文本赋值给 textarea 的 value 属性
  document.body.appendChild(textarea); // 将 textarea 元素添加到页面中
  textarea.select(); // 选中 textarea 的内容
  document.execCommand('copy'); // 执行复制命令
  document.body.removeChild(textarea); // 移除 textarea 元素
  cb && cb();
};

目前 execCommand 这个方法已被弃用，大家可以自行搜索最新的语法，转换也很简单

6 vant weapp 样式覆盖处理

微信小程序官方文档中说明，需要将 app.json 中的 “style”: “v2” 去除，因为小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

{
  "style":"v2", // 删除此行 
  "sitemapLocation": "sitemap.json"}
  

自定义组件中需要覆盖vant 样式时需要如下设置：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },
  options: { styleIsolation: 'shared', }, // 重点在这！！！
  })