VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动

微信小程序开发初体验(微信小程序开发初体验如何写)

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

组件实例

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) => {中获取。

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

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

TaroclassName='' 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

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

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 微信小程序开发初体验(微信小程序开发初体验如何写)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!