如何开发一个兼容微信小程序的外部组件

如果有任何使用上的问题，请联系zhangyan19

使用

x-cli miniProgram // 本地预览
x-cli publish online/test/dev // 发布，发布时选择h5和miniProgram
x-cli create <projectName> // 初始化微信小程序模板

如果想要调试从编辑平台创建的小程序，可在本地调试外部组件开启微信开发者工具时，启动参数加上对应项目id（p=xxxx），如同所示：

小程序参数

• p

  项目ID 前8位

• env

  集团用户中心SDK环境默认生产 登录接口（后端接口调用测试环境的接口时，请设置：env=sandbox）

  • production
  • sandbox

• penv

  编辑平台项目发布环境默认正式发布

  • production 正式发布（线上编辑平台点击正式发布）
  • sandbox 测试发布（线上编辑平台点击测试发布）
  • local 本地编辑平台点击正式发布
  • test 测试环境编辑平台点击正式发布
  • gray 灰度编辑平台点击正式发布

按钮功能

如果想用小程序的button各个button功能，添加一个button按钮，设置buttonType

• getPhoneNumber 获取手机号码
• contact 会话
• share 分享
• getUserInfo 获取用户信息

其他相关参数，请使用驼峰式传进来，例如：

<button 
  className="button contact-button"
  buttonType="contact"
  sessionFrom={v.sessionFrom}
  sendMessageImg={v.sendMessageImg}
  sendMessageTitle={v.sendMessageTitle}
  showMessageCard={v.showMessageCard}
  sendMessagePath={v.sessionFrom}
  onClick={this.doTask.bind(this, ctx, v)}
>
  {v.operationName}
</button>

开发注意：

一、条件编译：

当我们遇到了h5和小程序执行不同的代码，则使用

/*IFTRUE_isWebPlatform*/
这里是h5执行的逻辑
/*FITRUE_isWebPlatform*/

/*IFTRUE_isWxPlatform*/
这里是微信执行的逻辑
/*FITRUE_isWxPlatform*/

二、dom结构如何书写

正常按照react的jsx语法写就可以，其中有一些不支持的规则下面提前说明一下： **1、不支持嵌套组件的写法，**例如：

let a = (<div>ss</div>)
return (<div>{a}</div>)

目前我们没有办法解析dom之间的上下文关系

2、不支持在map内使用三目运算

 <ul className='pancel_content' block='true'>
   {
     dataMap.map(item => (
                item.desc.length < 5 ? (<li>11</li>) : (<li>22</li>)
  ))
}
</ul>

3、不支持forEach前面定义一个变量存放dom数组，后面dom结构中使用该变量

4、不支持使用伪元素和伪类元素

5、不支持在index.js内嵌套其他react子组件

日志数据查看

小程序添加的特殊日志字段：

小程序的eventid和h5保持一致：设置的是啥就是啥，没有设置就是项目id 区分小程序和h5的字段： wxmini: "true"

性能日志数据查看：

appid: 1001128

所有相关日志全部查看b.gif

日志公共字段：

fromedit: "true"
wxmini: "true"

首屏渲染时间获取： eventid和clickname="wx-onrender" 来获取duration

图片load时间获取：

1、拿到指定图片的路径例如：imgurl = "//activity.xueersi.com/oss/resource/精品课头图-65b95.png"
2、clickname = "img-render-time"
3、eventid

获取对应的duration的时间