微信小程序数据绑定和转移

好习惯

代码复杂时，一定要对页面的相关函数的生命周期和访问的顺序有一个深入的了解。

基要

数据优先现代前端编程，可以无视DOM，只需要关注数据变化
数据绑定使用Mustache语法(双大括号)将变量包起来。
只有data:{}中的数据才能绑定到页面，自定义的不能
setData()可以同步更新data属性中的数据，this.setData是同步方法，一定会保证这段代码走完之后，onLoad函数才结束。更保险
读取data中的数值，使用this.data
页面加载时，data会以JSON字符串的形式由传递至页面，所以，data中的数据必须是可以转成JSON的类型：字符串、数字、布尔值、对象、数组。
任意JS文件中声明的变量和函数只在该文件中有效，如果要跨页面数据共享，在app.js中定义全局变量，在其他JS中使用getApp()获取和更新。var app = getApp()
在标签的属性中使用，一定要用双引号。引号和{}之间一定不能有空格
在标签的属性写true or false时，写在{{}}里面，只有这样它才是以布尔值判断的，字符串代表true，空字符串代表false
data:{}中的值属于单向数据绑定，数据的改变只能从.js–>.wxml，小程序目前只能做单向数据绑定。页面数据改变，小程序可以通过事件的方式改变js变量。
{}中可以加入表达式，简单的运算：数学运算、字符串拼接、逻辑运算、三元表达式，不能加入语句。

将公共代表放在单独的JS文件中

作为一个公共模块，可以被其他JS文件调用
模块只能通过module.exports or exports 对外提供接口
common.js

function sayHello(name){...}
module.exports.sayHello = sayHello

在需要使用的JS文件中用require引用(相对路径)

var common = require('../../utils/common.js')
Page({hello:function(){common.sayHello('2020')
}
})

数据不应该写在脚本文件里面，而应该从脚本文件里面发一个请求，向服务器请求数据。
posts-data.js

var local_database=[
{data:"Nov 25 2020",
title:"标题",
imgSrc:"/images/post/b1.png",
...
},{}...{}
]
module.exports = {postList:local_database
}

引用数据时，定义一个变量，接收数据库输出的对象

var postsData = require('../../data/posts-data.js')
Page({onLoad:function(options){this.setData({postList:postsData.postList})
},
})

在wxml中使用 posts.wxml

<block wx:for = "{{postList}}" wx:for-item = "item">
...
<image class="post-author" src="{{item.avatar}}"></image>
<text class="post-date">{{item.date}}</text>
...

template模板

在模板中定义代码片段，然后在不同的地方调用
模板都是写在wxml文件中，文件名加后缀以示区别。还需要一个css样式文件
小程序template只实现模板化技术，没有实现模块化技术。所以，模板只需要两个文件，wxml css，不需要js文件
可以用绝对路径
模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 `` 模块
<template is="模板名字" data="{{数据传递}}"/>
传递数据时，加…相当于把这个对象给展开了
<import src="" /> 引入模板
在样式表里引用模板用 @import
post-item-template.wxss 写样式
posts.wxss @import "post-item/post-item-template.wxss";

<template name="postItem"><view class="post-container"><view class="post-author-date"><image class="post-author" src="{{avatar}}"></image><text class="post-date">{{date}}</text></view>...</view>
</template>

<block wx:for="{{postList}}" wx:for-item="item">
<view catch:tap="onPostTap" data-postId="{{item.postId}}" data-post-name="{{item.title}}"><template is="postItem" data="{{...item}}"/>
</view>
</block>

页面之间数据传递

当前点击页面的postid，需要在文章详情页面使用postid。
把postid从post.js页面，传递到post-detail.js页面
post.js中

 onPostTap: function (e) {var postId = e.currentTarget.dataset.postid;wx.navigateTo({url: 'post-detail/post-detail?id='+postId,  //这个id是自定的，叫post-id也可以})}

在post-detail.js中，在页面onLoad中接收

var postsData = require("../../../data/posts-data.js");
Page({onLoad: function(options) {var postId = options.id;var postData = postsData.postList[postId];...}
})

把数据绑定到元素标签的属性里面

用data-前缀，data-postId="{{item.postId}}"，item是数据文件里面的一个文章的子元素JS对象
在属性列表里面，data-自定义单词，是自定义属性
必须由data开头，然后由若干个-连接若干个单词，data是固定前缀
data-postId，在JS中是 e.currentTarget.dataset.postid
data-post-name，在JS中是 e.currentTarget.dataset.postName
dataset 数据集，所有自定义数据的集合

缓存storage

所有涉及缓存的都有两个方法，同步、异步。
wx.setStorage 异步
wx.setStorageSync(‘String’, Object/String) 同步,同步的都是在后面加Sync
如果用户不去主动的清除缓存，这个缓存是永久存在的。
在脚本里获取缓存变量
wx.getStorage
```
 var game = wx.getStorageSync('key')
```
删除一个启动键的缓存 wx.removeStorage
wx.removeStorageSync('key')
清除所有缓存 wx.clearStorage
wx.clearStorageSync();
缓存最大不能超过10MB

微信小程序数据绑定和转移相关推荐

【愚公系列】2022年02月微信小程序-数据绑定
文章目录前言 1.小程序页面结构 2.数据绑定的定义一.数据绑定 1.简单绑定总结前言 1.小程序页面结构微信小程序的页面结构主要是分别由四个文件组成: js(逻辑处理文件):负责页面逻辑内 ...
微信小程序数据绑定与模板语法
微信小程序数据与模板配置总述: 对应的语法格式与vue的语法格式类似 wxml数据绑定 WXML 模板语法 - 数据绑定.数据绑定的基本原则在 data 中定义数据在 WXML 中使用数据在 ...
微信小程序数据绑定如何绑定函数方法
概述使用微信小程序进行数据绑定我们绑定的都是data的数据,data的数据发生变化,就会相应的触发渲染.当时找了半天,这个.wxml也只是绑定data里面额数据,但是有时候我们需要根据数据在方法 ...
微信小程序数据绑定和事件绑定
1.数据绑定的基本原则 (1)在data中定义数据 (2)在WXML中使用数据 2.在data中定义页面的数据在页面对应的.js文件中,把数据定义到data对象中即可. 3.Mustache语法的格 ...
vue react 以及微信小程序数据绑定的区别
1.小程序中 data初始化数据 this.setData() 修改数据修改数据的行为始终是同步的数据流 :单项 Model --> View 2.vue data初始化数据 this ...
微信小程序数据绑定和简单的运算
数据绑定简单用法: Page({data: {message: '张三'} })/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var conten ...
微信小程序常见面试题总结
1.阐述一下微信公众平台账号的分类? 微信公众账号分为订阅号.服务号.小程序(含小游戏).企业微信(原企业号) 2.阐述一下不同公众账号的特点? 订阅号: 为媒体和个人提供一种新的信息传播方式,主要功 ...
2022最新微信小程序常见面试题总结
1.微信小程序有几个文件 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构.内部主要是微信自己定义的一套组件 WXSS ( ...
微信小程序的基本使用
小程序默认创建模板中(没有使用云开发的模板) pages 里边存放当前小程序所有的页面每一个页面需要单独创建一个文件夹每一个文件夹中默认包含四个文件 js 对应当前页面的逻辑代码 json 对应的 ...

微信小程序数据绑定和转移

好习惯

基要

将公共代表放在单独的JS文件中

template模板

页面之间数据传递

把数据绑定到元素标签的属性里面

缓存storage

微信小程序数据绑定和转移相关推荐

最新文章

热门文章