好习惯
代码复杂时，一定要对页面的相关函数的生命周期和访问的顺序有一个深入的了解。
基要
数据优先 现代前端编程，可以无视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，空字符串代表falsedata:{}中的值属于单向数据绑定，数据的改变只能从.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="" /> 引入模板在样式表里引用模板 用 @importpost-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
,
})
}
在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.postiddata-post-name，在JS中是 e.currentTarget.dataset.postNamedataset 数据集，所有自定义数据的集合
缓存storage
所有涉及缓存的都有两个方法，同步、异步。wx.setStorage 异步wx.setStorageSync(‘String’, Object/String) 同步,同步的都是在后面加Sync如果用户不去主动的清除缓存，这个缓存是永久存在的。在脚本里获取缓存变量wx.getStorage var game = wx.getStorageSync('key')
删除一个启动键的缓存 wx.removeStoragewx.removeStorageSync('key')清除所有缓存 wx.clearStoragewx.clearStorageSync();缓存最大不能超过10MB
