微信小程序页面传参数小程序的api文档的写法：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变量的值输出到控制台 } }) 后记：这篇文档是看的一些文档自己又整理了一遍。
|
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
请发表评论