用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

微信小程序学习--传递参数的3种方式

Rolan 2017-7-17 00:45

学习两周左右微信小程序了,做个小结吧,以后有时间再学了。玩玩还是挺有意思的。以下是小结:传递参数的3种方式(注意:以下传递的参数名都要使用小写字母,不要使用驼峰命名法或任何有大写字母的命名方式,不然传 ...

学习两周左右微信小程序了,做个小结吧,以后有时间再学了。玩玩还是挺有意思的。以下是小结: 
传递参数的3种方式(注意:以下传递的参数名都要使用小写字母,不要使用驼峰命名法或任何有大写字母的命名方式,不然传递过去都会被强转成小写字母,导致获取的时候出错!!): 
1、形式如 data-variable="{{variable}}",(variable代表变量名): 
.wxml设置传递的参数:variable,格式如下:

  1. [html] view plain copy print?
  2. <view bindtap="functionName" data-variable="{{variable}}">

.js接收传递过来的参数:event.currentTarget.dataset.variable;(注意是currentTarget而不是target,直接console.log(event);具体可在控制台查看event存放的数据结构再决定访问方式。)

  1. [javascript] view plain copy print?
  2. functionName:function(event){
  3. console.log(event);
  4. var variableData = event.currentTarget.dataset.variable;
  5. }

2、形式如 variable="{{variable}}",(variable代表变量名):(此方式经测试貌似有局限性,只能传递id过去,其它变量名无法接收),接收id:event.currentTarget.id或event.target.id。 
hotMovies.wxml文件:

  1. [html] view plain copy print?
  2. <view wx:for="{{hotMovies(你的内容)}}" wx:for-item="item">
  3. <view class="picView">
  4. <image class="pic" src="{{item.images.medium(你的图片路径)}}" id="{{item.id(每一项的id)}}" bindtap="toDetail(绑定的点击函数)" />
  5. </view>
  6. </view>
  7. hotMovies.js文件:
  8. [javascript] view plain copy print?
  9. toDetail: function (event) {//参数:事件对象
  10. console.log(event);
  11. wx.navigateTo({
  12. url: '/pages/detail/detail?id=' + event.currentTarget.id,/**url传参*/
  13. })
  14. }

3、继续接着2的例子看,这个主要是 url 传参: 
hotMovies.js文件:

  1. [javascript] view plain copy print?
  2. toDetail: function (event) {//参数:事件对象
  3. console.log(event);
  4. wx.navigateTo({
  5. url: '/pages/detail/detail?id=' + event.currentTarget.id,/**url传参*/
  6. })
  7. }

detail.js文件:

  1. [javascript] view plain copy print?
  2. onLoad: function (options) {
  3. /**括号内的options可以改名的,结果一样,无影响,已测试!*/
  4. console.log("options:");
  5. console.log(options);//就是一个接收传递过来的参数的对象
  6. var filmId = options.id;(接受url传参,不限制只能传递id变量名,可以传递多个变量名值)
  7. console.log(filmId);//获取在首页点击的电影图片的id
  8. /**具体逻辑实现 */
  9. }

设置一个input输入要搜索的内容加上一个按钮点击即搜索(简单例子): 
.wxml文件

  1. [html] view plain copy print?
  2. <input bindinput="keyword" placeholder="默认文字的内容" placeholder-style="默认文字的样式"/>
  3. <button bindtap="requestSomething" data-keyword="{{keyword}}">搜索</button><!--data-keyword
  4. 向函数传参keyword-->

.js文件

  1. [javascript] view plain copy print?
  2. keyword:function(event){
  3. this.setData({
  4. keyword:event.detail.value /**获取input输入的值并设置到搜索值 */
  5. });
  6. }
  7. requestSomething: function (event) {
  8. var keyword = null;
  9. if(event){//点击了搜索按钮才有此值
  10. keyword = event.currentTarget.dataset.keyword;/**获取到值后再请求相关数据 */
  11. }
  12. /**此处根据需要请求相关api获取数据 */
  13. }

微信小程序本地存储数据与读取数据: 
存储数据:

  1. [javascript] view plain copy print?
  2. wx.setStorage({
  3. //不会覆盖原来key的内容!
  4. key: 'detailInfo'+id,
  5. data: data,
  6. })

或wx.setStorageSync('key', data); //会覆盖原来key的内容来存储新的内容!

读取数据:

  1. [javascript] view plain copy print?
  2. var storageInfo = wx.getStorageSync(key);/**获取本地同步数据 */

微信小程序的发请求request:

  1. [javascript] view plain copy print?
  2. var data={...params...};//传递的参数对象
  3. wx.request({
  4. url: url, //请求api的接口地址
  5. data: data,//传递的参数
  6. header: {
  7. 'content-type': 'json'//不能写"application/json"否则报400错误。
  8. },
  9. success: function (res) {//请求数据成功后才执行的回调函数。
  10. console.log(res);
  11. that.setData({/**放在外部没效果,因为还没执行成功就分配了数据结果是空数据 */
  12. key: value
  13. });
  14. wx.setStorageSync('key', data);//第一次请求之后存储数据在本地
  15. }
  16. });
鲜花
鲜花 (4)
鸡蛋
鸡蛋

刚表态过的朋友 (4 人)

分享至 : QQ空间
收藏
原作者: limitlessness 来自: csdn

相关阅读