微信小程序开发总结
基础的配置及视图层、逻辑层自己看文档 [微信小程序文档][1] 这里只说一下自己的经验总结提醒
微信小程序不运行在浏览器,所以不能操作Dom,也没有document、window对象
每一个页面路径最多五层
eg:页面A->页面B->页面C->页面D->页面E->(页面F是跳转不出来的) 注:不经过redirect,redirect后的页面算是第一层,但是没有-返回-按钮
没有外链,只能用app.json里配置的路由,a标签编译时会自动过滤掉
wx:for循环渲染时,要添加wx:key,否则报警告
使用
做x轴滚动时,要设置height属性,否则开发工具买账,手机可不惯着你
给视图绑定数据时,只有事件绑定、wx:key、wx:for-index、wx:for-item,直接绑定,不需要{{}},其它绑定都要在{{}}里绑定
app.json里的pages,最好是按照,层级顺序进行配置,要不然可能不会跳转
使用touchstart、touchend时,最好不要阻止冒泡,会影响子级的tap事件,touchmove最好阻止冒泡,防止影响父级scroll-view
视图元素单位使用input时,最好在bindinput中动态设置value,否则安卓真机会出问题
设计时最好让ui做成750px,开发中,ui是多少px,你写成多少rpx就OK了,原理,自己查文档去页面传参
视图响应Page({ onLoad (opositions) { // 看看是不是你想要的 console.log(opositions.id) } })
每个页面都有一个Page实例,响应就是该实例的setData方法触发的, *直接给绑定数据赋值,数据会改变,但是视图不会渲染 js文件 let config = { data: {} } Page(config)事件绑定
wxml文件js文件 let config = { data: {}, tapHandler () { console.log("i am a handler") } }
bindtap的绑定最终会解析成方法名,所以bindtap=“tapHandler(参数)”,是会报错的,----没有找到‘tapHandler(参数)’这个方法,
好在,执行事件绑定函数时,会给它传递一个参数,参数里能取到,id、data-set,可以用他们俩绑定属性,不要企图找name、class等属性,没用的,没有
组件分三个文件,wxml、js、css
wxml文件定义template模版,页面里以import方式引入,这样能控制传入模版的数据
js文件exports一个对象,页面里以require方式引入,并且合并到Page实例化的配置对象中 let tempateConfig = require("url") let mergeConfig = require("url/wxTools.js")["mergeConfig"] let config = { data: {} } config = mergeConfig(config, templateConfig) Page(config)
mergeConfig是自己定义的简单的对象合并函数,支持多层,多对象合并
Object.assign()方法在安卓真机上运行报错,不能用
wxTools.js function merge (con, mcon) { for (var key in mcon) { if (typeof mcon[key] == "object" && con[key]) { merge(con[key], mcon[key]) } else { con[key] = mcon[key] } } return con } function mergeConfig () { let config = {} for (var i = 0, len = arguments.length; i < len; i++) { config = merge(config, arguments[i]) } return config } module.exports = { mergeConfig: mergeConfig }
css文件以@import方式导入开发技巧
1.锚点
还好微信提供了
wxml文件js文件 Page({ data: { toView: "hash1" }, goHash (e) { let hash = e.currentTarget.dataset.hash this.setData({ toView: hash }) } })
但是这是单向的,只能点击按钮,跳转锚点,屏幕滑动到相应锚点,toView属性不会相应改变,当然,如果你能通过bindscroll事件动态取到的相关数据,并且最终能把toView计算出来,就另说了,但不要想操作dom获取元素宽高什么的,对不起,微信的dom卖完了,没有
2.滚动加载
微信没有document、window对象,所以没有onscroll给你用,那怎么办呢?
还好微信提供了
wxml文件js文件 Page({ data: { movies: [] }, getMovies () { let _self = this wx.request({ url: "https://......", data: {}, success: function(res) { // res.data才是你后端返回的真实数据 _self.setData({ movies: res.data }) } }) }, loadMovies () { // 得到要更新的数据,setData重置movies } }) {{item.name}}
可以做懒加载,也可以做预加载,具体逻辑自己想吧
暂时就这些啦。。。最后抱怨一句,咋就不支持外链呢,引共用组件咋那么麻烦呢
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50288.html
微信小程序开发总结 基础的配置及视图层、逻辑层自己看文档 [微信小程序文档][1] 这里只说一下自己的经验总结 提醒 微信小程序不运行在浏览器,所以不能操作Dom,也没有document、window对象 每一个页面路径最多五层 eg:页面A->页面B->页面C->页面D->页面E->(页面F是跳转不出来的) 注:不经过redirect,redirect后的页面算是第一层,但是没有-返回-按钮...
微信小程序开发总结 基础的配置及视图层、逻辑层自己看文档 [微信小程序文档][1] 这里只说一下自己的经验总结 提醒 微信小程序不运行在浏览器,所以不能操作Dom,也没有document、window对象 每一个页面路径最多五层 eg:页面A->页面B->页面C->页面D->页面E->(页面F是跳转不出来的) 注:不经过redirect,redirect后的页面算是第一层,但是没有-返回-按钮...
摘要:官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署,在微信开发工具中直接上传代码就行。 为什么 学习 Java 三年,目前已经工作了2年,因为自学,基础差,所以打算年末总结一下常见的基础知识和面试点; 也可以通过独立做一个项目整合自己工作期间学习的知识,加深印象。 但是想着回家或是平时手机用的多,做一款APP和小程序很方便查看。 项目展示 本...
摘要:由于个人技术水平有限,在问题描述,解决方案中存在的问题,希望可以得到各位前辈的指点。本篇主要是记录我在开发微信小程序中遇到的问题。各记录点排序,跟随自己开发过程中的问题出现时间而定。。微信小程序数据页面数据传递总结 由于个人技术水平有限,在问题描述,解决方案中存在的问题,希望可以得到各位前辈的指点。本篇主要是记录我在开发微信小程序中遇到的问题。各记录点排序,跟随自己开发过程中的问题出现...
阅读 3064·2021-10-13 09:40
阅读 3891·2021-09-22 15:51
阅读 1399·2021-09-22 15:48
阅读 1016·2021-09-06 15:00
阅读 1766·2019-08-30 15:43
阅读 2277·2019-08-29 18:35
阅读 1579·2019-08-29 16:18
阅读 3526·2019-08-29 12:49