微信小程序中初次開(kāi)發(fā)的示例分析

這篇文章主要介紹微信小程序中初次開(kāi)發(fā)的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

組件實(shí)例

this.selectComponent('.classSelector')

引入

Taro

Taro中引入Vant Weapp，不能直接通過(guò)第三方NPM包的形式直接調(diào)用。

需要進(jìn)行以下幾步：

• 在github上找到Vant-weapp下載文件包，將對(duì)應(yīng)的dist目錄復(fù)制到項(xiàng)目/src/components/vant-weapp目錄下。

• 在Pages對(duì)應(yīng)文件的config.usingComponents中，配置每個(gè)頁(yè)面所需要的組件。(無(wú)法在app.js中進(jìn)行所謂的全局注冊(cè)組件。)

  config = {
    navigationBarTitleText: '首頁(yè)',
    usingComponents: {
      "van-button": "../../components/vant-weapp/button/index",
      "van-popup": "../../components/vant-weapp/popup/index"
    }
  }

• 在使用Vant-weapp組件后，taro構(gòu)建會(huì)自動(dòng)將相應(yīng)的組件復(fù)制一份到dist/components下，而Vant-weapp的組件還依賴(lài)工具庫(kù)/src/components/vant-weapp/wxs，該工具庫(kù)taro不會(huì)自動(dòng)復(fù)制到dist中。所以，我們需要修改/config/index.js文件中的config.copy.patterns，讓其在編譯時(shí)，自動(dòng)復(fù)制到dist對(duì)應(yīng)目錄下。

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

• 由于Vant-weapp的樣式使用的單位是px，所以會(huì)被taro編譯成rpx，以便對(duì)各個(gè)設(shè)配進(jìn)行適配?？梢酝ㄟ^(guò)修改/config/index.js文件中的config.weapp.module.pxtransform.selectorBlackList不讓其單位轉(zhuǎn)換。

pxtransform: {
  enable: true,
  config: {

  },
  selectorBlackList: [
    /^.van-.*?$/,  // 這里是vant-weapp中className的匹配模式
  ]
},

ec-canvas

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

iconfont

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

該資源不會(huì)自動(dòng)拷貝到dist/文件夾下，所以需要通過(guò)修改配置文件拷貝。

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

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

自定義組件

組件向外傳參

this.triggerEvent(
  'eventType',
  {
    key: value, //這里定義的鍵值對(duì)，在父組件中，通過(guò)args.detail.key獲?。?
  },
  {
    bubbles: true, //事件屬性:是否冒泡；
    capturePhase: true, //事件屬性： 是否可捕獲；
  }
)

插槽slot

用法同Vue。

注意：組件內(nèi)部對(duì)slot定義的樣式，不起作用。只能在調(diào)用組件的位置，對(duì)傳入slot內(nèi)的結(jié)構(gòu)進(jìn)行樣式定義。

開(kāi)發(fā)障礙

Taro中自定義tabBar

切換Tab時(shí)(app.jsx中config.tabBar.custom = true)，需要在對(duì)應(yīng)Tab頁(yè)componentDidShow生命周期中：

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

注意是this.$scope.getTabBar。

Canvas引起的層級(jí)覆蓋問(wèn)題

canvas是由客戶(hù)端創(chuàng)建的原生組件，而原生組件的層級(jí)是最高的，所以頁(yè)面中的其他組件無(wú)論設(shè)置 z-index 為多少，都無(wú)法蓋在原生組件上。

所以，如果canvas和遮罩交互同時(shí)存在時(shí)，canvas會(huì)在遮罩的上層。

解決方案：

• 在canvas外包裹一層結(jié)構(gòu)，通過(guò)條件(遮罩的開(kāi)關(guān))來(lái)設(shè)置canvas容器的hidden屬性。

• 通過(guò)cover-view、cover-image自定義組件，cover-view通過(guò)定位，提升層級(jí)，可以防止被canvas覆蓋。

• 因?yàn)楹蟛迦氲脑M件可以覆蓋之前的原生組件，所以，要注意：結(jié)構(gòu)上，cover-view一定要在canvas后邊；

• 可以通過(guò)flex和order來(lái)調(diào)整展示順序。

• 只有最外層cover-view才支持position: fixed。

typeof

wx:if語(yǔ)句中，不能使用typeof運(yùn)算符，{{}}中不能使用typeof運(yùn)算符，只能在wxs中使用。

data初始化賦值

不知道data什么時(shí)機(jī)初始化，但，初始化data的時(shí)候，不能使用this指向當(dāng)前組件實(shí)例（這是this === void 0），也就是說(shuō)，data初始化只能給一個(gè)常量。

需要properties或methods來(lái)初始化data的時(shí)候，只能在生命周期attached中通過(guò)this.setData更新data的值。

而且，如果data.fn = this.methodName，methodName中如果調(diào)用了this引用，這時(shí)this指向的是data，所以需要使用data.fn = this.methodName.bind(this)。

vant-weapp庫(kù)中的popup樣式設(shè)置

popup內(nèi)容的大小不是由內(nèi)容撐起來(lái)的，需要通過(guò)popup組件的custom-class定義一個(gè)類(lèi)名，設(shè)置width、height來(lái)定義內(nèi)容的尺寸。

vant-tree-select事件觸發(fā)

在Taro中的代碼風(fēng)格類(lèi)React，而vant-weapp庫(kù)中的代碼風(fēng)格為wxml和wxs風(fēng)格。React綁定事件是駝峰式，wxml綁定事件是使用-連字符分隔。

這就造成了Taro使用vant-tree-select組件時(shí)，onClickNav和onClickItem不會(huì)被vant-tree-select識(shí)別，事件無(wú)法觸發(fā)。

解決方案：對(duì)vant-tree-select進(jìn)行二次封裝，事件原始觸發(fā)通過(guò)this.$triggerEvent傳出駝峰式的事件類(lèi)型，在Taro中調(diào)用。

目前vant-weapp0.5.20中，vant-tree-select不支持單選。

props獲取不到

駝峰式命名的事件無(wú)法觸發(fā)[微信小程序]

注意@tarojs/cli的版本，如最初用的1.2.0版本就獲取不到自定義組件傳的參數(shù)，升級(jí)到最新版1.3.15就可以了。

注意@tarojs/cli的版本，如最初用的1.2.0版本無(wú)法觸發(fā)駝峰式命名的事件，升級(jí)到最新版1.3.15，使用onClick-nav形式綁定事件就可以了。

Taro編譯器無(wú)法自動(dòng)將用到組件的.wxs文件移動(dòng)到/dist相應(yīng)目錄下

手動(dòng)移動(dòng)。

在微信開(kāi)發(fā)者工具中運(yùn)行Taro代碼，如果有async/await，則regenerator is not defined。

將微信開(kāi)發(fā)者工具--> 右上角詳情--> 本地設(shè)置里的配置全部關(guān)掉，如ES6轉(zhuǎn)ES5...。

定制echarts，引入報(bào)錯(cuò)

echarts.js不需要再次編譯，配置中新增編譯時(shí)忽略echarts.js。

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

getState()獲取Store存儲(chǔ)的數(shù)據(jù)

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

真機(jī)調(diào)試正常，預(yù)覽/體驗(yàn)版空白（只有tabbar）

將"本地設(shè)置"--> "上傳時(shí)進(jìn)行代碼保護(hù)"取消勾選。

Taro中className=''單引號(hào)賦值不起作用。

className的值使用雙引號(hào)包裹。

Taro自定義組件內(nèi)部使用iconfont，不顯示圖標(biāo)

參照外部樣式類(lèi)、全局樣式類(lèi)。
或者，組件單獨(dú)引入iconfont.css也可以。

獲取路由參數(shù)

this.$router.params

iconfont字符串渲染

如果將字體做變量使用，通用情況下無(wú)法正常顯示。

• 需要將icon: ['', '']改寫(xiě)成icon: ['\ue61e', '\ue62d']。

• <rich-text nodes={&#xe61e;}></rich-text>

使用Taro/微信小程序同步接口，仍異步返回結(jié)果

如使用Taro.getStorageSync('key')獲取緩存數(shù)據(jù)，結(jié)果仍是異步返回。同步接口需要結(jié)合await使用，才是真正的同步。

分包

包大小限制

• 包超過(guò)2048KB，無(wú)法上傳

分包操作

• 主包不需要特殊處理。

• navigateTab導(dǎo)航的頁(yè)面必須在主包中。

• 分包

• 分包在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'
        ]
      },
    ],

偽動(dòng)態(tài)綁定事件

// 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) {

        }
    }
})

獲取組件實(shí)例

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"

對(duì)于options.styleIsolation =  "apply-shared"的應(yīng)用：
如果是組件包裹組件，內(nèi)部組件設(shè)置該配置，外部組件的樣式依舊無(wú)法影響內(nèi)部組件，Page()或Component()注冊(cè)的頁(yè)面級(jí)的樣式才能影響到組件內(nèi)部樣式。

以上是“微信小程序中初次開(kāi)發(fā)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！