温州联云乡微信小程序开发初次体验

组件实例this.selectComponent('
.classSelector'
)引入TaroTaro中引入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-canvasec-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。
typeofwx: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.paramsiconfont字符串渲染如果将字体做变量使用，通用情况下无法正常显示。
需要将icon: ['

'
, '

'
]改写成icon: ['
ue61e'
, '
ue62d'
]。

}
>使用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 // 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 (

this.submitForm.bind(this)}
> {
fieldMetas.map((meta, idx) => {
return ( this.refFormItem}
onValidate={
this.gatherValidate.bind(this)}
taroKey={
meta.name}
metas={
meta}
initialValue={
this.findValue.call(this, meta.name)}
> ) }
) }
按钮 this.clearValidate}
>按钮

) }
styleIsolation: "apply-shared"对于options.styleIsolation = "apply-shared"的应用：
如果是组件包裹组件，内部组件设置该配置，外部组件的样式依旧无法影响内部组件，Page()或Component()注册的页面级的样式才能影响到组件内部样式。
推荐教程：
《微信小程序》以上就是微信小程序开发初次体验的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
微信小程序 taro本文转载于：
segmentfault，如有侵犯，请联系a@php.cn删除
上一篇：
小程序怎么注销？
下一篇：
微信小程序常见的开发问题汇总相关文章相关视频怎么退出微信小程序的登录？Promise实践 实现微信小程序接口封装微信小程序实时监听less文件编译成wxss文件，...微信小程序跳一跳在哪里找？微信小程序开发初次体验深入了解微信小程序(二)深入了解微信小程序(三)深入了解微信小程序(四) [温州做小程序]