微信小程序开发初次体验

组件实例

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-canvasECharts 的微信小程序版本。

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-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.methodNamemethodName中如果调用了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: ['', '']改写成icon: ['\ue61e', '\ue62d']
  • <rich-text nodes={}></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()注册的页面级的样式才能影响到组件内部样式

推荐教程:《微信小程序

以上就是微信小程序开发初次体验的详细内容,更多请关注立业阁其它相关文章!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected] 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

立业阁 微信小程序教程 微信小程序开发初次体验 https://www.liyege.cn/wxxcxkfccty.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章