在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
微信小程序页面传参数小程序的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变量的值输出到控制台 } }) 后记:这篇文档是看的一些文档自己又整理了一遍。
|
请发表评论