cari
Rumahapplet WeChatPembangunan program mini微信小程序开发初次体验

微信小程序开发初次体验

Jun 20, 2020 am 10:18 AM
taroapplet WeChat

组件实例

this.selectComponent('.classSelector')

引入

<span style="font-size: 14px;">Taro</span>

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

<span style="font-size: 14px;">iconfont</span>

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

该资源不会自动拷贝到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内的结构进行样式定义。

开发障碍

<span style="font-size: 14px;">Taro</span>中自定义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形式绑定事件就可以了。

<span style="font-size: 14px;">Taro</span>编译器无法自动将用到组件的<span style="font-size: 14px;">.wxs</span>文件移动到<span style="font-size: 14px;">/dist</span>相应目录下

手动移动。

<span style="font-size: 14px;">微信开发者工具</span>中运行<span style="font-size: 14px;">Taro</span>代码,如果有<span style="font-size: 14px;">async/await</span>,则regenerator is not defined。

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

定制echarts,引入报错

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

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

getState()获取Store存储的数据

可以在<span style="font-size: 14px;">(dispatch, getState) => {</span>中使用。

真机调试正常,预览/体验版空白(只有tabbar)

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

<span style="font-size: 14px;">Taro</span><span style="font-size: 14px;">className=''</span>单引号赋值不起作用。

className的值使用双引号包裹。

<span style="font-size: 14px;">Taro</span>自定义组件内部使用<span style="font-size: 14px;">iconfont</span>,不显示图标

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

获取路由参数

this.$router.params

<span style="font-size: 14px;">iconfont</span>字符串渲染

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

  • 需要将icon: ['&#xe61d;', '&#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 == &#39;text&#39; || metas.type == &#39;number&#39; || metas.type == &#39;idcard&#39; || metas.type == &#39;digit&#39;}}"
    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()注册的页面级的样式才能影响到组件内部样式

推荐教程:《微信小程序

Atas ialah kandungan terperinci 微信小程序开发初次体验. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Artikel ini dikembalikan pada:segmentfault. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod