• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

走过小程序的套路,我再也不想重复啦

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序页面传参数

小程序的api文档的写法:

https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#js-%E4%BA%A4%E4%BA%92%E9%80%BB%E8%BE%91

1. json 文件类中颜色类 真机与模拟器 颜色不一致(导航栏背景颜色,芬兰背景颜色)

-》解决方案:使用16进制颜色表示方法(#ffff)

2.变量声明

2个大括号 中间为变量

<view> {{ message }} </view>

Page({ data: { message: 'Hello MINA!' } })

1.关于文件结构 

app.xxx,是整体的js css json

app.json.是各个页面

项目的配置文件:

关于页面js里面的结构:

page的页面结构,在page的页面结构里面也可以添加一些函数方法,在page里面再调用,这样

2.关于页面之间参数的传递

 

页面上的绑定命令是这个: 例如:bindtap="ballClickEvent"

在js上 ballClickEvent: function () {

slideUp.call(this);

},

setData 的解释:

页面上的绑定命令是这个(详细看官网)

方法1:

通过路由的方式传参数:

index.wml页面

<navigator url = "../aaa/aaa?id=1" ></navidator> //传到aaa.wxml的时候传过去的值为id=1,则需要在aaa.wxml 的js获取到id=1

aaa.js页面

Page({

data: {

id:''

},

onLoad: function (options){

var that = this;

that.setData({

id: options.id

})

console.log(that.data.id)

}

})

其他的方法:

https://blog.csdn.net/yzi_angel/article/details/80568411

一、使用全局变量实现数据传递

购物车界面需要根据是否登录来区别显示,当没有登录时提醒去登录,登录后之间显示自己购物车里的商品列表

全局变量使用方法:

再 app.js 文件中定义全局变量 globalData, 如下:将用户信息存放在 userInfo 中

再如:

//app.js

App({

onLaunch: function () {

// 登录

wx.login({

success: res => {

// 发送 res.code 到后台换取 openId, sessionKey, unionId

}

})

},

// 全局变量

globalData: {

userInfo: null

}

})

购物车界面获取全局变量userInfo 的值,判断用户是否登录

 

onLoad: function (options) {

var app = getApp();

if (app.globalData.userInfo === null){

this.setData({ "haveLogin": false});

}else {

this.setData({ "haveLogin": true});

}

},

二、页面跳转或重定向时,使用url带参数传递数据

使用场景:

点击产品列表中的某一项,跳转到对应的产品详情页面

 

使用方法:

产品列表中要保证每一项都有个id,点击的时候获取id即可

 

toSomeone: function (event) {

wx.navigateTo({

url: 'some/some?id=' + event.target.id,

})

}

详情页获取传递来的数据:

onLoad: function (options) {

console.log(options)

},

关于onLoad的函数声明:

*注: 如果传递参数是 json 数据,需要使用JSON.stringify,然后在后台逻辑之中使用JSON.parse序列化成对象使用,而且传递的数据有字节也有限制

三、使用组件模板 template传递参数

使用场景:

我们在排版项目页面的时候,习惯将相同样式的模块拆分成一个模板,在需要用的时候,直接引用模板,这样就可以避免多次排版,同时还方便维护。

 

使用方法:

不知道怎么使用 template 的同学们, 可以看一下我的上一篇博文(小程序template使用方法),那里详细描述了如何使用template的方法,这里就不在赘述了。

 

<template is="good" data="{{data}}"></template>

四、使用缓存传递参数

使用场景:

登录成功后将用户信息放入缓存,购物车获取显示用户数据

 

使用方法:

//缓存数据

wx.setStorage({

key: 'userInfo',

data: res.userInfo

})

1

2

3

4

5

getUsersInfo: function () {

//读取缓存登录

wx.getStorage({

key: 'userInfo',

success: function (res) {

this.userInfo = res.userInfo;

}

})

}

五、使用数据库传递数据

使用场景:

购物车中添加商品之后,直接保存到数据库中,然后购物车界面的产品显示,直接从数据库中获取数据。

 

使用方法:

//添加商品

addGoods: function (good) {

wx.request({

url: 'your url',

method: 'POST',

header: {

'content-type': 'application/json'

},

data: good,

success: function (res) {

this.setData({ "goodsList": res.data })

}

})

},

//获取数据

getGoodsList: function () {

wx.request({

url: 'your url',

method: 'GET',

success: function (res) {

this.getGoodsList();

}

})

}

六,通过 data -xxxx的形式来写

wxml页面

<button bindtap='clickMe' data-id='1'>点击</button>

如果需要传递多个,可以写多个data-[参数]的方式进行传递

js页面

 

clickMe:function(e){

var id = e.currentTarget.dataset.id

console.log(id);

},

注意:通过wxml设置data-[参数名]传递参数,[参数名]只能是小写,不能有大写

七:form 的表单传值

小程序的双向绑定和vue哪里不一样?

答:

小程序直接this.data的属性是不可以同步到视图的,必须调用:

 

this.setData({

noBind:true

})

传参数的方法

给HTML元素添加data-*属性来传递我们需要的值,然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象

二、设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值

三、在navigator中添加参数传值

、微信小程序与H5的区别?

答:

第一条是运行环境的不同

传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器,是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对小程序专门做了优化,配合自己定义的开发语言标准,提升了小程序的性能。

第二条是开发成本的不同

只在微信中运行,所以不用再去顾虑浏览器兼容性,不用担心生产环境中出现不可预料的奇妙BUG

第三条是获取系统级权限的不同

系统级权限都可以和微信小程序无缝衔接

第四条便是应用在生产环境的运行流畅度

长久以来,当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时,它的体验总是不尽人意,需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立

关于 ${}的用法

ES6新特性中的字符串模板允许使用英文字符抑音符号`(提示:这里我们不能将其理解为单引号)来创建字符串,并且在该字符串中可以包含都【美元符号+大括号】包裹的变量

格式:console.log(`ES6新特性:${name}`)

说明:格式中的name为变量名

例子:

Page({

data:{

// text:"这是一个页面"

stringTemplateTxt:''

},

stringTemplate:function(){

var stringTemplateTxt="字符串模板数据"//定义一个变量并初始化值

console.log(`我是${stringTemplateTxt}`)//将stringTemplateTxt变量的值输出到控制台

}

})

后记:这篇文档是看的一些文档自己又整理了一遍。

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap