微信小程序开发初体验（微信小程序开发初体验如何写）

组件实例

this.selectcomponent('.classselector')

Taro 概述

Vant Weapp 是用 Taro 实现的，不能直接通过第三方 NPM 包调用。

您将需要执行以下步骤：

在Github上找到Vant-weapp下载文件包，将对应的dist目录复制到project/src/components/vant-weapp下。 目录。 。 在Pages-enabled文件中的config.usingComponents中配置每个页面所需的组件。 （app.js 中无法完成所谓的组件全局注册。） config = { NavigationBarTitleText: 'Home', usingComponents: { "van-button": "../../components/vant- ] weapp/ button/index", "van-popup": "../../components/vant-weapp/popup/index" } } 使用 Vant-weapp 组件后，taro 构建了 I将要。 组件会自动复制到 dist/components 中，Vant-weapp 的组件也依赖于工具库 /src/components/vant-weapp/wxs。 工具库taro不会自动复制到dist。 因此，需要修改/config/index.js文件中的config.copy.patterns，使其在编译时自动复制到dist中对应的目录中。 复制：{ 模式：[ { 来自：'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- Canvasec -canvas 是 ECharts 的微信小程序版本。 将 iconfont

下载到本地并将其放置在指定位置而不进行任何更改。

该资源不会自动复制到dist/文件夹下，所以必须修改配置文件才能复制。

复制：{pattern：[... {from：'src/assets/fonts/'，到：'dist/assets/fonts/'}，...]，选项：{}}

接下来，在app.js入口文件中，导入“./assets/fonts/iconfont.css”。 }, { 气泡: true, //事件属性：是否冒泡； CapturePhase: true, //事件属性：是否捕获。 }) 槽的使用与 Vue 中相同。

注意：在组件内的插槽上定义的样式无效。 传递的槽中结构的样式只能在调用组件的地方定义。

开发瓶颈 自定义 Taro 的 tabBar

在 tab 之间切换时（config.tabBar.custom = true），在对应的 tab 页上。 setData({ selected: 1 })}

注意这是this.$scope.getTabBar。

画布引起的关卡覆盖问题。 Canvas是客户端创建的原生组件，是原生组件的最高级别。 因此，无论z-index如何设置，原生组件都无法覆盖页面中的其他组件。 在组件上。

因此，如果画布和蒙版交互同时存在，画布将出现在蒙版之上。

解决方案：

在画布外面包裹一层结构，通过条件（遮罩开关）设置画布容器的隐藏属性。

通过自定义 cover-view 和 cover-image 组件，可以调整 cover-view 的位置并提高其级别，使其不被画布覆盖。

后面插入的原生组件可能会覆盖之前的原生组件，所以请注意以下几点：从结构上来说，cover-view必须在canvas后面。 你可以使用 flex 和 order 调整显示顺序。 仅最外层封面 - 视图支持位置：固定。 typeof 运算符不能在 typeof

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

数据初始化赋值

我们不知道数据什么时候会被初始化，但是当我们初始化数据时我们不能使用this来指向当前组件实例（这是this === void 0）。 换句话说，数据初始化只能提供常量。

如果需要一个属性或方法来初始化数据，则只能在附加的生命周期中通过this.setData更新数据的值。

另外，如果data.fn = this.methodName，如果用方法名调用this引用，this就指向数据，所以使用data.fn = this.methodName.bind(this)必须是。 。

vant-weapp 库弹出样式

内容不支持弹出内容大小。 您需要通过弹出组件的自定义-类来定义类名，并设置宽度和高度来定义它。 内容大小。

vant-tree-select事件触发

Taro的代码风格与React类似，但vant-weapp库的代码风格是wxml和wxs风格。 React 绑定事件是驼峰式的，wxml 绑定事件是用 - 连字符分隔的。

这意味着，当Taro使用vant-tree-select组件时，onClickNav和onClickItem不被vant-tree-select识别，无法触发事件。

解决方案：接下来封装vant-tree-select。 事件最初是通过此触发的。 $triggerEvent 传递一个驼峰式事件类型，并在 Taro 中调用。

目前在vant-weapp0.5.20中，vant-tree-select不支持单选。

Prop 无法获取驼峰命名事件，无法触发【微信小程序】

请注意@tarojs/cli 版本。 例如，最初使用的1.2.0版本无法检索自定义组件传递的参数。 只需升级到最新版本1.3.15即可。

请关注@tarojs/cli的版本。 如果原版本1.2.0无法触发驼峰命名事件，请升级到最新版本1.3.15，并使用onClick-nav格式绑定事件。 就是这样。

Taro编译器在对应目录下创建组件文件/dist

并手动移动它。

微信开发者工具 代码中的Taro执行。 如果存在 async/await ，则不定义再生器。

放置微信开发者工具-->右上角放置详情--> 关闭本地设置中的所有配置，例如将ES6转换为ES5...

自定义echarts并引入错误报告

无需再次编译echarts.js。 如果将 echarts.js 添加到配置中，它将在编译时被忽略。

weapp: { ...compile: { except: ['src/echarts-for-weixin/ec-canvas/echarts.js'] getState()在store中保存获取数据

可在(dispatch, getState) => {中获取。

在真机上调试没问题，预览/体验版是空白的（仅选项卡栏）。

“本地设置”-- > 取消选中“上传时的代码保护”。

将 Taro 与 className='' Masu 括起来。 分配不起作用。

className 的值用双引号括起来。

Taro 自定义组件内部使用 iconfont 使用。 隐藏图标

请参阅外部样式类和全局样式类。 或者，您可以将 iconfont.css 单独导入到您的组件中。

获取路由参数

this.$router.params

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

当字体作为变量使用时，常见情况下无法正确显示。

图标：['', ''] 必须替换为图标：['\ue61e', '\ue62d']。 使用Taro/微信小程序同步接口异步返回结果

例如Taro.getStorageSync('key')使用缓存检索数据并异步返回结果。 要实现真正的同步，同步接口必须与await配合使用。

分包操作无法上传，因为分包大小限制超过2048KB。

主包无需特殊处理。

navigateTab 导航的页面必须位于主包中。

分包

分包由子包组成。 页面: [ 'pages/login/login', 'pages/index/index', 'pages/manage/manage', 'pages/schedule/schedule', 'pages/inpidual/inpidual' ], 'subPackages': [ { 'root': 'pages-main', '名称: 'main', 'pages': [ 'acs/acs', 'acs-setting/acs-setting', 'setting-details /设置-详细信息','当前 - 能量/当前 - 能量'、'历史 - 能量/历史 - 能量'、'功率/电力'、'运行时/运行时'、'每日 - 使用情况/每日[k3 ] ] USAGE ',' ONSHIFT - 记录/ONSHIFT - 记录 ',' 时间表 - 详细信息/时间表 - 详细信息']},], 伪动态绑定事件 // Index wxml //index.jsComponent({ data: {changeValidate: '', inputValidate: '', BlurValidate: '', eventType: 'input', 规则: '', value: '', isRequire d: false , validateState: ' ' , //['验证中', '成功', '错误'] validateMessage: '' }, Observers: { Rules(newV) { console.log('--- -[k3 ] [k3 ]========') this.setData({s.data.eventType} validate`]: 'onblurvalidate' onvalidate(e,rule) {}}}}) include(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; ( ) )} styleIsolation: "apply-shared"

对于 options.styleIsolation = "apply-shared" 的应用程序：如果组件包装了组件并且内部组件设置了此配置，则外部组件仍然不会影响内部组件。 使用 Page() 或 Component() 注册的页面级样式可以影响组件的内部样式。

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

下载微信App

微信是一款支持通过手机网络发送语音消息、视频、照片和文字的移动通讯软件。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：微信小程序开发初体验（微信小程序开发初体验如何写） https://zhujicankao.com/123768.html