全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[崇左seo公司立荐久澳]微信小程序开发初次体验

  

组件实例

 

  this☆□○.selectComponent('○•★□;.classSelector')

  

引入

Taro

 

  Taro中引入Vant Weapp▼-▲▼,不能直接通过第三方NPM包的形式直接调用●▪■△。

  需要进行以下几步◇◆:

  

  • 在github上找到Vant-weapp下载文件包,[崇左seo公司立荐久澳]将对应的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-canvasECharts 的微信小程序版本。

iconfont

 

  下载到本地,什么都不要改,放到指定位置。[滨州市里做seo的公司]浅谈javascript中相等操作符:==与===的区别

  该资源不会自动拷贝到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-viewcover-image自定义组件,cover-view通过定位▼-•,提升层级,可以防止被canvas覆盖▽▷●○。

      

    • 因为后插入的原生组件可以覆盖之前的原生组件,所以,要注意:结构上,cover-view一定要在canvas后边◇■◁-;
    • 可以通过flexorder来调整展示顺序◆▼▽。
    • 只有最外层cover-view才支持position☆■◁-: fixed

typeof

 

  wx:if语句中,不能使用typeof运算符,{{}}中不能使用typeof运算符□◇★,只能在wxs中使用■◆。

  

data初始化赋值

 

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

  需要propertiesmethods来初始化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定义一个类名,设置widthheight来定义内容的尺寸。

  

vant-tree-select事件触发

 

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

  这就造成了Taro使用vant-tree-select组件时△•○,onClickNavonClickItem不会被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)

 

  将"…△◆=;本地设置"▪☆;-->••; "上传时进行代码保护"★▽;取消勾选。

  

TaroclassName=''单引号赋值不起作用。

 

  className的值使用双引号包裹。

  

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

 

  参照外部样式类▼★、全局样式类▪○★-。
或者,组件单独引入iconfont.css也可以。

  

获取路由参数

 

  this.$router.params

  

iconfont字符串渲染

 

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

  

  • 需要将icon=■: [''□■, '&●◇=□;#xe62c;'△▼▲□;]改写成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()注册的页面级的样式才能影响到组件内部样式

  推荐教程□▲★:《微信小程序》

  以上就是微信小程序开发初次体验的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[崇左seo公司立荐久澳]微信小程序开发初次体验

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。