微信小程序-开发经验总结---(基础重点)
总结
1:传参,方法判断
- js中 方法中可以传递一个方法作为形参,在java中是不可以的。比如start项目中的
getUserInfo:function(cb){var that = thisif(this.globalData.userInfo){typeof cb == "function" && cb(this.globalData.userInfo)}else{//调用登录接口wx.login({success: function () {wx.getUserInfo({success: function (res) {that.globalData.userInfo = res.userInfotypeof cb == "function" && cb(that.globalData.userInfo)}})}})} },
这里就是传递一个形参,cb的方法,并且这里还有一个很巧妙的判断方法
typeof cb == "function" && cb(that.globalData.userInfo)
利用的&&的运算规律,首先判断cb是不是一个方法, 这里的==可以作为类型是否相当的判断,然后在&&中如果前面的不满足,后面的则不会执行;如果是cb是一个方法,调用cb方法,并且传入success成功回调的userinfo参数
还有一点,if(this.globalData.userInfo) 可以作为是否为null的判断条件,在java中不可以。
2:log打印
- log的打印,如果直接打印“”+变量 是不可以的,因为人家没有toString()方法
X console.log("info"+info);
所以只能分开打印
console.log("info"); console.log(info);
3: json取对象
json的使用,可以通过 json["key"]来取其子对象
person: {
name: "jafir",
age: "11",
}var name = person["name"];
var age = person["age"];
info: {persons:[{name:"123",age:11},{name:"jafir1",age:12}]}
//如果有数组 通过这种方法获取console.log(that.data.info["persons"][1].name)console.log(that.data.info["persons"][1].age)
4:定义boolean类型值
要注意如果在page的data中要定义一个boolean类型的值,必须是 isSuccess : true而不是 isSuccess :"true"
if (this.data.isSccess) {console.log("true")} else {console.log("false")}
因为如果是isSucees : "true" ,结果为true,没问题
但是如果是isSucess:"false",结果依旧为true,
因为这里的isSuccess不是boolean,而是一个非空类型,既然非空,if就是为true
如果,默认undefined,if则为false
5:使用"that"
建议在 page{}外面定义一个that变量,然后在onLoad中赋值为this,以后所有的地方,都可以使用that,这样就避免有些地方,this并不是指向page的上下文对象
//上下文对象
var that;
page({onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数that = this;}...
that.setData({xxx: xxx,})
})
6:page的生命周期方法
- 只有onload中有options参数,可以获取页面传值等等,onload只会执行一次
- 但是onShow可以每次切换页面的时候执行,所以,需要每次刷新页面的数据请求,可以放在onShow中,测试过,性能体验基本无影响
- page的生命周期没有Android那么丰富,页面之间传值也有一定的限制。
- 可以通过普通的url的传值方式传值,xxx?key = value ,但是要注意:我们传的值其实是相当于字符串和url拼接在一起,请不要直接传一个对象,因为对象没有toString方法。
- 传递json对象的步骤为:
- 把json对象变成字符串,如果本身就是那就直接用,如果是json对象,需要 parseString(json)
- 和url进行参数拼接?key=value
- 取得时候在onload的options里面取出,
onLoad: function (options) {
var value= options.key
} - 然后JSON.stringify(value)转为json对象使用
7: 页面间跳转
从主页跳转一个新的界面 新界面处理完逻辑 成功与否 结束之后怎么通知 主页结果?
这种情况,一般是没有办法解决的。经过测试,如果你想要从二级非主页界面直接navigator打开主页,是不行的,会报错。
所以,我们采用的策略是:二级界面处理完数据之后,直接返回,然后在主页界面重新拉取数据。所以会出现,我们的请求接口是在onShow方法里面执行的。因为onload只会执行一次
8:wxml
- text标签可以使用bindtap
<image src="{{logoUrl?logoUrl:'../../img/paihao.png'}}"></image>
可以使用这种方式来显示默认的图片- 再强调一下 在标签中使用data-xx-oo ="value",在对应对象中可以通过e.currentTarget.dataset.xxOo获得,这里的xx-oo ,-其实是会转义驼峰。这种一般使用场景为 你可以给你所点击或者绑定事件的view设置一个数据,比如你一个picker里面有5个view,就可以绑定每个view不同的值,在触发事件的时候取到相应的值
- 如果你想要显隐view你可以通过wx:if="true/false"来处理,但是这样的话,如果为false,page不会去渲染这个view,它所在的位置空间也不会预留,假如下面的view就会往上排。如果想要留存它的位置空间,可以修改其style样式来解决
style="visibility:{{isShow?'visible':'hidden'}}"
9:统一网络请求处理结果
你可以封装一下网络请求的返回结果,做统一处理
requestWithGet: function(paramsData) {data.method = 'GET'this.requestInternal(paramsData)
},
requestWithPost: function(paramsData) {data.method = 'POST'this.requestInternal(paramsData)
},
requestInternal: function (paramsData) {var that = this;console.log('requestInternal: 开始请求接口[' + paramsData.url + ']');//开始网络请求wx.request({url: paramsData.url,data: paramsData.data,method: paramsData.method,success: function (res) {console.log('requestInternal: 接口请求成功[' + paramsData.url + ']');paramsData.success(res);},fail: function (res) {console.log('requestInternal: 接口请求失败[' + paramsData.url + ']');console.log(res);在这里做请求失败的统一处理wx.showToast({title: '网络访问失败',duration: 1500})typeof paramsData.fail == "function" && paramsData.fail(res);},complete: function (res) {
//在这里做完成的统一处理typeof paramsData.complete == "function" && paramsData.complete(res);}})
}
这样在使用请求的时候,可以直接先wx.request({}) 这样,就可以IDE给你联想生成对应的请求格式,然后直接把“wx.request” 替换 “requestWithGet”或者“requestWithPost”就OK了
微信小程序-开发经验总结---(基础重点)相关推荐
- 视频教程-微信小程序从入门基础(第一季)-PHP
微信小程序从入门基础(第一季) 多年一线互联网开发实战以及培训经验,对php开发,linux运维架构有丰富的经验,善于分析问题,解决问题. lampol ¥117.00 立即订阅 扫码下载「CSDN程 ...
- 【微信小程序】零基础学 | 小程序语法
在前面的章节中讲过WXML用于描述页面的结构.WXS用于结合WXML构建出页面的结构.WXSS用于描述页面的样式,它们三者都有特定的语法.其中,WXSS与CSS相差不大,所以就不单独列出了.本章主要讲 ...
- Java 初学者做的第一个微信小程序--关于Java基础
为什么 学习 Java 三年,目前已经工作了2年,因为自学,基础差,所以打算年末总结一下常见的基础知识和面试点: 也可以通过独立做一个项目整合自己工作期间学习的知识,加深印象. 但是想着回家或是平时手 ...
- Uni-app开发微信小程序的一些基础知识点包括开发工具的安装和项目的初始配置运行(边学边更新)
文章目录 1.开发工具 1.1 HBuilder X 安装 1.2 微信开发者工具 安装 1.3 HbuilderX 文档 2.创建初始项目运行 2.1 创建Uni-app项目 2.2 运行 2.2. ...
- 微信小程序云开发基础版也开始收费了
发现问题 之前把菜谱小程序的爬虫服务由SpringBoot迁移为了基于Node.js的微信云开发,原因是当时想为本来配置就不高的云服务器腾出一点地方,想当初云开发基础版还是免费的,因为基础版确实适合用 ...
- 微信智慧外链接微信小程序源码下载,支持多端转换,致力打造(微信)小程序生态的基础必需品
全新运营版微信小程序智慧链接生成工具.致力打造(微信)小程序营销推广生态的基础必需品:全新UI界面及架构体系打造小程序智慧链接:只要拥有你就是手握百万流量的大佬!全新运营致富版微信小程序链接生成工具: ...
- 微信小程序开发,基础知识点汇总详解
目录 一.目录中文件说明 1.app.js文件 2.project.config.json文件 3.sitemap.json文件 4.页面中的.json文件 5.如何创建小程序页面 二.微信中代码的格 ...
- 微信小程序开发-入门基础
微信小程序基本目录 pages:主要存放小程序的页面文件,其中每个文件夹为一个页面,每个页面包含四个文件,.wxml文件是界面文件,.js是事件交互文件,用于处理界面的点击事件等功能:.wxss为界面 ...
- 微信小程序开发经验总结
前言: 前段时间公司打算做一款基于线下服务的小程序,涉及到扫码支付,地图,充值,会员体系等功能.由于公司暂时没有新招小程序开发人员,而我之前又有过开发小程序的经验.所以,这个小程序开发自然而然也就交给 ...
最新文章
- vue $data data
- 【转】oracle之错误处理
- (转)用@Resource注解完成属性装配
- hibernate缓存理解
- 西安工程大学计算机是几本专业,西安工程大学专业介绍
- AngularJS创建应用- HTML5 移动框架
- iconfont 阿里巴巴矢量图标库 引入图标不显示
- linux系统怎么安装小小输入法,CentOS 7.0下安装小小输入法
- 软考高级 真题 2009年下半年 信息系统项目管理师 论文
- html中的css样式表达式,CSS表达式
- 7.1 我的质量之旅
- 在物联网领域,英特尔除了高速计算的芯片,还提供了什么技术?
- 腾讯互娱旗下工作室一览
- 美团饿了么外卖cps项目怎么做?谈谈我的推广方法与经验感悟
- Latex表格单元格内文本顶着上格线解决
- 解锁工具Unlocker试用
- 黑解(ICCID)证书备份
- 二叉排序树的特点以及实现代码
- 诺基亚S40的theme2.0的nth主题
- 博易鑫管家(分账户系统)资管风控软件免费使用!!
热门文章
- java实现模拟登录新浪微博
- 程序员真实生活曝光,蹦迪也带着电脑,网友解释:这样才有安全感!
- 常用的人工智能数据集简介
- 高德地图(Attempt to invoke virtual method 'void com.amap.api.maps.MapView.onDestroy()' on a null object)
- MAC OS X LION 快捷键汇总
- 2020ICPC上海 B Mine Sweeper II(思维)
- 全球及中国电子级聚合物行业未来发展预测及投资前景分析报告2022-2028年
- 攻沙服务器维护,12月19日服务器合服公告
- Swift封装图片浏览,多张图片浏览,缩放,gif图片的播放
- coredump介绍