微信小程序页面传参数

小程序的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变量的值输出到控制台

}

})

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