小结学习微信小程序
来源:互联网 发布:正规购买淘宝小号平台 编辑:程序博客网 时间:2024/05/16 02:55
学习两周左右微信小程序了,做个小结吧,以后有时间再学了。玩玩还是挺有意思的。以下是小结:
传递参数的3种方式(注意:以下传递的参数名都要使用小写字母,不要使用驼峰命名法或任何有大写字母的命名方式,不然传递过去都会被强转成小写字母,导致获取的时候出错!!):
1、形式如 data-variable="{{variable}}",(variable代表变量名):
.wxml设置传递的参数:variable,格式如下:
<view bindtap="functionName" data-variable="{{variable}}">
.js接收传递过来的参数:event.currentTarget.dataset.variable;(注意是currentTarget而不是target,直接console.log(event);具体可在控制台查看event存放的数据结构再决定访问方式。)
functionName:function(event){ console.log(event); var variableData = event.currentTarget.dataset.variable; }
2、形式如 variable="{{variable}}",(variable代表变量名):(此方式经测试貌似有局限性,只能传递id过去,其它变量名无法接收),接收id:event.currentTarget.id或event.target.id。
hotMovies.wxml文件:
<view wx:for="{{hotMovies(你的内容)}}" wx:for-item="item"> <view class="picView"> <image class="pic" src="{{item.images.medium(你的图片路径)}}" id="{{item.id(每一项的id)}}" bindtap="toDetail(绑定的点击函数)" /> </view></view>hotMovies.js文件:
toDetail: function (event) {//参数:事件对象 console.log(event); wx.navigateTo({ url: '/pages/detail/detail?id=' + event.currentTarget.id,/**url传参*/ }) }
3、继续接着2的例子看,这个主要是 url 传参:
hotMovies.js文件:
toDetail: function (event) {//参数:事件对象 console.log(event); wx.navigateTo({ url: '/pages/detail/detail?id=' + event.currentTarget.id,/**url传参*/ }) }
detail.js文件:
onLoad: function (options) { /**括号内的options可以改名的,结果一样,无影响,已测试!*/ console.log("options:"); console.log(options);//就是一个接收传递过来的参数的对象 var filmId = options.id;(接受url传参,不限制只能传递id变量名,可以传递多个变量名值) console.log(filmId);//获取在首页点击的电影图片的id /**具体逻辑实现 */}
设置一个input输入要搜索的内容加上一个按钮点击即搜索(简单例子):
.wxml文件
<input bindinput="keyword" placeholder="默认文字的内容" placeholder-style="默认文字的样式"/><button bindtap="requestSomething" data-keyword="{{keyword}}">搜索</button><!--data-keyword向函数传参keyword-->
.js文件
keyword:function(event){ this.setData({keyword:event.detail.value /**获取input输入的值并设置到搜索值 */ });}requestSomething: function (event) { var keyword = null; if(event){//点击了搜索按钮才有此值 keyword = event.currentTarget.dataset.keyword;/**获取到值后再请求相关数据 */ } /**此处根据需要请求相关api获取数据 */}
微信小程序本地存储数据与读取数据:
存储数据:
wx.setStorage({ //不会覆盖原来key的内容! key: 'detailInfo'+id, data: data, })或wx.setStorageSync('key', data); //会覆盖原来key的内容来存储新的内容!
读取数据:
var storageInfo = wx.getStorageSync(key);/**获取本地同步数据 */
微信小程序的发请求request:
var data={...params...};//传递的参数对象wx.request({ url: url, //请求api的接口地址 data: data,//传递的参数 header: { 'content-type': 'json'//不能写"application/json"否则报400错误。 }, success: function (res) {//请求数据成功后才执行的回调函数。 console.log(res); that.setData({/**放在外部没效果,因为还没执行成功就分配了数据结果是空数据 */ key: value }); wx.setStorageSync('key', data);//第一次请求之后存储数据在本地 }});
阅读全文
0 0
- 小结学习微信小程序
- 微信小程序的小结
- 微信小程序小结
- springmvc学习笔记(5)-入门程序小结
- springmvc学习笔记(5)-入门程序小结
- hadoop 学习小结--简单示例程序(3)
- 我的学习小结-1、程序的内存分配
- [学习小结]Ajax小结
- 面试小结 学习小结
- 学习小结
- 学习小结
- 学习小结
- 学习小结
- 学习小结
- 学习小结
- 学习小结
- 学习小结
- 学习小结
- 并查集--算法,优化,变种
- SpringMVC执行流程
- 上手ajax
- 尝试使用laravel
- Android通过OpenCV获取摄像头帧数据并在悬浮框显示
- 小结学习微信小程序
- 解决光纤猫恢复出厂功能后的上网问题
- javaweb编译部署
- 通过反射了解集合泛型本质
- 函数方法执行两次
- caffe:使用draw_net.py绘制网络架构
- TCP定时器
- CodeForces 702B: Powers of Two(遍历、穷举)
- isAlive()方法