WeChat 미니 프로그램 개발 첫 경험

Component 인스턴스

this.selectComponent('.classSelector')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-canvas是 ECharts 的微信小程序版本。

<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-view、cover-image自定义组件，cover-view通过定位，提升层级，可以防止被canvas覆盖。

  • 因为后插入的原生组件可以覆盖之前的原生组件，所以，要注意：结构上，cover-view一定要在canvas后边；
  • 可以通过flex和order来调整展示顺序。
  • 只有最外层cover-view才支持position: fixed。

typeof

wx:if语句中，不能使用typeof运算符，{{}}中不能使用typeof运算符，只能在wxs中使用。

data初始化赋值

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

需要properties或methods来初始化data的时候，只能在生命周期attached中通过this.setData更新data

🎜Introduction🎜🎜

🎜Taro🎜

🎜🎜Vant Weapp이 Taro에 도입되었습니다. , 타사NPM 패키지를 통해 직접 호출할 수 없습니다. 🎜🎜🎜다음 단계를 수행해야 합니다: 🎜

• github에서 Vant-weapp 다운로드 파일 패키지를 찾아 해당 dist 디렉터리를 프로젝트 /src/comComponents/vant-weapp 디렉토리.
• 페이지 해당 파일의 config.usingComponents에서 각 페이지에 필요한 구성요소를 구성합니다. (소위 전역 등록 구성 요소는 app.js에서는 수행할 수 없습니다.)

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

• Vant-weapp 사용 시 code> 구성 요소 이후에 <code>taro 빌드는 해당 구성 요소를 자동으로 dist/comComponents 및 Vant-weapp에 복사합니다. >의 구성요소는 또한 taro가 자동으로 복사되지 않는 도구 라이브러리 /src/comComponents/vant-weapp/wxs에 의존합니다. 거리. 따라서 /config/index.js 파일의 config.copy.patterns를 수정하여 dist에 자동으로 복사할 수 있도록 해야 합니다. 컴파일하는 동안 >해당 디렉터리 아래.

    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'
        ]
      },
    ],

• Vant-weapp 스타일은 px 단위를 사용하므로 타로가 됩니다. code>는 rpx로 컴파일되어 각 장치에 맞게 조정됩니다. /config/index.js 파일의 config.weapp.module.pxtransform.selectorBlackList를 수정하여 단위 변환을 방지할 수 있습니다.

// 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}}"
/>

🎜ec-canvas🎜

ec-canvas는 ECharts의 WeChat 애플릿 버전입니다.

🎜iconfont🎜

🎜로컬로 다운로드하고 아무것도 변경하지 말고 지정된 위치에 넣으세요. 🎜🎜이 리소스는 dist/ 폴더에 자동으로 복사되지 않으므로 구성 파일을 수정하여 복사해야 합니다. 🎜

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

        }
    }
})

🎜그런 다음 app.js 항목 파일에서 './assets/fonts/iconfont.css'를 가져옵니다. 🎜🎜🎜커스텀 컴포넌트🎜🎜

🎜컴포넌트는 매개변수를 외부로 전달합니다. 🎜

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>
    )
}

🎜slot🎜

사용법은 Vue와 동일합니다 >.

🎜참고: 구성 요소 내부의 slot에 대해 정의된 스타일은 효과가 없습니다. slot에 전달된 구조체의 스타일은 구성 요소가 호출되는 위치에서만 정의할 수 있습니다. 🎜🎜🎜개발 장애물🎜🎜

🎜Taro🎜🎜 맞춤 tabBar🎜

🎜탭 전환 시(app.jsx의 config.tabBar.custom = true), 해당 탭 페이지 comComponentDidShow 라이프 사이클에 있어야 합니다. 🎜rrreee🎜 🎜this.$scope.getTabBar라는 점에 유의하세요. 🎜🎜

🎜Canvas로 인한 레이어 커버리지 문제🎜

canvas는 클라이언트가 생성한 네이티브 컴포넌트로, 네이티브 컴포넌트의 레벨이 가장 높기 때문에 페이지 z-index가 아무리 설정되어 있어도 기본 구성 요소에 다른 구성 요소를 배치할 수 없습니다.

🎜그래서 캔버스와 마스크 상호작용이 동시에 존재한다면 캔버스가 마스크 위에 있게 됩니다. 🎜🎜해결책: 🎜

• 캔버스 외부에 구조 레이어를 래핑하고 조건(마스크 스위치)을 통해 캔버스 컨테이너의 를 숨김으로 설정합니다. 속성.
• 🎜 cover-view 및 cover-image를 통해 구성 요소를 맞춤 설정하고 cover-view 위치 지정을 통해 레벨을 향상시킵니다. 캔버스로 덮이는 것을 방지할 수 있습니다. 🎜
  • 나중에 삽입되는 네이티브 컴포넌트가 이전 네이티브 컴포넌트를 덮을 수 있으므로 주의하세요. 구조적으로 cover-view는 반드시 캔버스에 있어야 합니다. ;
  • 표시 순서는 flex 및 order를 통해 조정할 수 있습니다.
  • 가장 바깥쪽커버 뷰만 위치: 고정을 지원합니다.

typeof

🎜는 <code>wx:if에서 사용할 수 없습니다. 문 typeof 연산자인 typeof 연산자는 {{}}에서는 사용할 수 없으며 wxs에서만 사용할 수 있습니다. 🎜

🎜데이터 초기화 할당🎜

🎜데이터가 언제 초기화될지는 모르겠지만 데이터를 초기화할 때 이것을 이용해 가리킬 수는 없습니다. 현재 구성 요소 인스턴스(이것은 this === void 0임), 즉 data는 상수로만 초기화될 수 있습니다. . 🎜🎜데이터를 초기화하기 위해 속성 또는 메서드가 필요한 경우 첨부된 라이프 사이클에서만 를 전달할 수 있습니다. code> >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形式绑定事件就可以了。

<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: ['', '']改写成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()注册的页面级的样式才能影响到组件内部样式。

推荐教程：《微信小程序》

위 내용은 WeChat 미니 프로그램 개발 첫 경험의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!