微信小程序开发初次体验如何，有哪些细节需要注意？

本文共计2840个文字，预计阅读时间需要12分钟。

使用组件实例和Taro引入Vant Weapp组件，不通过NPM包直接调用，步骤如下：

1. 在GitHub上找到Vant Weapp，下载文件包。

2.解压文件包，找到`dist`目录。

3.将`dist`目录下的组件代码复制到你的Taro项目中。

4.在需要使用Vant Weapp组件的文件中，使用`this.selectComponent`方法引入组件。

组件实例

this.selectComponent('.classSelector')

引入

Taro

Taro中引入Vant Weapp，不能直接通过第三方NPM包的形式直接调用。

需要进行以下几步：

• 在github上找到Vant-weapp下载文件包，将对应的dist目录复制到项目/src/components/vant-weapp目录下。
• 在Pages对应文件的config.usingComponents中，配置每个页面所需要的组件。(无法在app.js中进行所谓的全局注册组件。)

config = { navigationBarTitleText: '首页', usingComponents: { "van-button": "../../components/vant-weapp/button/index", "van-popup": "../../components/vant-weapp/popup/index" } }

• 在使用Vant-weapp组件后，taro构建会自动将相应的组件复制一份到dist/components下，而Vant-weapp的组件还依赖工具库/src/components/vant-weapp/wxs，该工具库taro不会自动复制到dist中。所以，我们需要修改/config/index.js文件中的config.copy.patterns，让其在编译时，自动复制到dist对应目录下。

copy: { patterns: [ { from: 'src/components/vant-weapp/wxs/', to: 'dist/components/vant-weapp/wxs/' } ], options: { } },

• 由于Vant-weapp的样式使用的单位是px，所以会被taro编译成rpx，以便对各个设配进行适配。可以通过修改/config/index.js文件中的config.weapp.module.pxtransform.selectorBlackList不让其单位转换。

pxtransform: { enable: true, config: { }, selectorBlackList: [ /^.van-.*?$/, // 这里是vant-weapp中className的匹配模式 ] },

ec-canvas

ec-canvas是 ECharts 的微信小程序版本。

iconfont

下载到本地，什么都不要改，放到指定位置。

该资源不会自动拷贝到dist/文件夹下，所以需要通过修改配置文件拷贝。

copy: { patterns: [ ... { from: 'src/assets/fonts/', to: 'dist/assets/fonts/' }, ... ], options: { } }

然后，在app.js入口文件中，import './assets/fonts/iconfont.css'。

自定义组件

组件向外传参

this.triggerEvent( 'eventType', { key: value, //这里定义的键值对，在父组件中，通过args.detail.key获取； }, { bubbles: true, //事件属性:是否冒泡； capturePhase: true, //事件属性： 是否可捕获； } )

插槽slot

用法同Vue。

注意：组件内部对slot定义的样式，不起作用。只能在调用组件的位置，对传入slot内的结构进行样式定义。

开发障碍

Taro中自定义tabBar

切换Tab时(app.jsx中config.tabBar.custom = true)，需要在对应Tab页componentDidShow生命周期中：

if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) { this.$scope.getTabBar().setData({ selected: 1 }) }

注意是this.$scope.getTabBar。

Canvas引起的层级覆盖问题

canvas是由客户端创建的原生组件，而原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。

所以，如果canvas和遮罩交互同时存在时，canvas会在遮罩的上层。

解决方案：

• 在canvas外包裹一层结构，通过条件(遮罩的开关)来设置canvas容器的hidden属性。

• 通过cover-view、cover-image自定义组件，cover-view通过定位，提升层级，可以防止被canvas覆盖。

  • 因为后插入的原生组件可以覆盖之前的原生组件，所以，要注意：结构上，cover-view一定要在canvas后边；
  • 可以通过flex和order来调整展示顺序。
  • 只有最外层cover-view才支持position: fixed。

typeof

wx:if语句中，不能使用typeof运算符，{{}}中不能使用typeof运算符，只能在wxs中使用。

data初始化赋值

不知道data什么时机初始化，但，初始化data的时候，不能使用this指向当前组件实例（这是this === void 0），也就是说，data初始化只能给一个常量。

需要properties或methods来初始化data的时候，只能在生命周期attached中通过this.setData更新data的值。

而且，如果data.fn = this.methodName，methodName中如果调用了this引用，这时this指向的是data，所以需要使用data.fn = this.methodName.bind(this)。

vant-weapp库中的popup样式设置

popup内容的大小不是由内容撑起来的，需要通过popup组件的custom-class定义一个类名，设置width、height来定义内容的尺寸。

vant-tree-select事件触发

在Taro中的代码风格类React，而vant-weapp库中的代码风格为wxml和wxs风格。React绑定事件是驼峰式，wxml绑定事件是使用-连字符分隔。

这就造成了Taro使用vant-tree-select组件时，onClickNav和onClickItem不会被vant-tree-select识别，事件无法触发。

解决方案：对vant-tree-select进行二次封装，事件原始触发通过this.$triggerEvent传出驼峰式的事件类型，在Taro中调用。

---

目前vant-weapp0.5.20中，vant-tree-select不支持单选。

props获取不到

驼峰式命名的事件无法触发[微信小程序]

注意@tarojs/cli的版本，如最初用的1.2.0版本就获取不到自定义组件传的参数，升级到最新版1.3.15就可以了。

注意@tarojs/cli的版本，如最初用的1.2.0版本无法触发驼峰式命名的事件，升级到最新版1.3.15，使用onClick-nav形式绑定事件就可以了。

Taro编译器无法自动将用到组件的.wxs文件移动到/dist相应目录下

手动移动。

在微信开发者工具中运行Taro代码，如果有async/await，则regenerator is not defined。

将微信开发者工具--> 右上角详情--> 本地设置里的配置全部关掉，如ES6转ES5...。

定制echarts，引入报错

echarts.js不需要再次编译，配置中新增编译时忽略echarts.js。

weapp: { ... compile: { exclude: ['src/echarts-for-weixin/ec-canvas/echarts.js'] } }

getState()获取Store存储的数据

可以在(dispatch, getState) => {中使用。

真机调试正常，预览/体验版空白（只有tabbar）

将"本地设置"--> "上传时进行代码保护"取消勾选。

Taro中className=''单引号赋值不起作用。

className的值使用双引号包裹。

Taro自定义组件内部使用iconfont，不显示图标

参照外部样式类、全局样式类。
或者，组件单独引入iconfont.css也可以。

获取路由参数

this.$router.params

iconfont字符串渲染

如果将字体做变量使用，通用情况下无法正常显示。

• 需要将icon: ['', '']改写成icon: ['\ue61e', '\ue62d']。
• <rich-text nodes={&#xe61e;}></rich-text>

使用Taro/微信小程序同步接口，仍异步返回结果

如使用Taro.getStorageSync('key')获取缓存数据，结果仍是异步返回。同步接口需要结合await使用，才是真正的同步。

分包

包大小限制

• 包超过2048KB，无法上传

分包操作

• 主包不需要特殊处理。

  • navigateTab导航的页面必须在主包中。

• 分包

  • 分包在subPackages配置。

pages: [ 'pages/login/login', 'pages/index/index', 'pages/manage/manage', 'pages/schedule/schedule', 'pages/inpidual/inpidual' ], 'subPackages': [ { 'root': 'pages-main', name: 'main', 'pages': [ 'acs/acs', 'acs-setting/acs-setting', 'setting-details/setting-details', 'current-energy/current-energy', 'history-energy/history-energy', 'electricity/electricity', 'runtime/runtime', 'daily-usage/daily-usage', 'onshift-record/onshift-record', 'schedule-details/schedule-details' ] }, ],

伪动态绑定事件

// index.wxml <input wx:if="{{metas.type == 'text' || metas.type == 'number' || metas.type == 'idcard' || metas.type == 'digit'}}" name="{{metas.name}}" type="{{metas.type}}" value="{{value}}" placeholder="{{metas.attrs.placeholder}}" bindchange="{{changeValidate}}" bindinput="{{inputValidate}}" bindblur="{{blurValidate}}" />

// index.js Component({ data: { changeValidate: '', inputValidate: '', blurValidate: '', eventType: 'input', rules: '', value: '', isRequired: false, validateState: '', //['validating', 'success', 'error'] validateMessage: '' }, observers: { rules(newV) { console.log('------=======') this.setData({ [`${this.data.eventType}Validate`]: 'onBlurValidate' }) } }, methods: { onBlurValidate (e) { this.onValidate(e, rule) }, onValidate (e, rule) { } } })

获取组件实例

refFormItem = (node, idx) => { if(this.formItem) { !this.formItem.includes(node) && this.formItem.push(node) } else { this.formItem = [node] } } ... clearValidate () { console.log(this.formItem) this.formItem.forEach(item => { item.clearValidate() }) } ... render () { const { fieldMetas } = this.props; return ( <Form className="form" onSubmit={this.submitForm.bind(this)}> { fieldMetas.map((meta, idx) => { return ( <form-item ref\={this.refFormItem} onValidate={this.gatherValidate.bind(this)} taroKey={meta.name} metas={meta} initialValue={this.findValue.call(this, meta.name)}> </form-item> ) }) } <Button form-type="submit">按钮</Button> <Button onClick={this.clearValidate}>按钮</Button> </Form> ) }

styleIsolation: "apply-shared"

对于options.styleIsolation = "apply-shared"的应用：
如果是组件包裹组件，内部组件设置该配置，外部组件的样式依旧无法影响内部组件，Page()或Component()注册的页面级的样式才能影响到组件内部样式。

推荐教程：《微信小程序》

以上就是微信小程序开发初次体验的详细内容，更多请关注自由互联其它相关文章！