微信小程序开发必备-Trace
小程序开发
浏览：1175 次
下载：到本地grace目录
创建页面时，请使用Grace替换的page方法。
从“grace/index.js”导入createPage
创建页面({
数据：{
用户信息：｛｝，
canIUse:真
}
加载（）{
//通过$data分配直接更新数据
this.$data.canIUse=假
//通过$http发起网络请求
这个。$http。帖子（“https://www.dtworkroom.com/doris/1/2.0.0/test“，｛xx:7｝）。然后（（d）=>{
控制台.log（d）
}).catch（错误=>{
console.log（错误状态，错误消息）
})
//全局事件总线-侦听事件
这是一辆$bus$打开（“enventName”，（数据）=>{
console.log（数据）
})
//返回上一页并传递数据
this.$goBack（｛retValue:“8”｝）
},
//跨页价值转移
$onBackData（数据）{
//接收从页面返回的数据，
}
...
})
注意：Grace的所有方法和属性名称都以“$”开头。
数据响应型
微信小程序中的数据发生变化后，应通过setData明确更新，例如：
//更新单个字段
this.set数据({
用户信息：res.userInfo
})
//更新多个字段
this.set数据({
用户信息：res.userInfo
canIUse:假
})
这显然受到React的影响。我不想学习。如果你用过Vue，你应该觉得它看起来很不雅观。尤其是当代码中有许多零散的值要更新时，代码看起来是多余的。此外，有时您必须调整setData以更改变量
现在，Grace将使您的代码更加优雅。您可以像Vue一样更新数据：
this.$data.userInfo=res.userInfo；
//更新多个字段，而不是重新分配
this.$数据={
用户信息：res.userInfo
canIUse:假
}
现在，您可以通过赋值直接更新界面。当然，您仍然可以使用此Set Data来更新数据。Grace将自动同步此$数据。
注意事项
Grace的数据响应原理与Vue相同（如果您熟悉Vue，可以跳过它）。因此，与Vue一样，由于JavaScript的限制，Grace无法检测数组下标赋值和对象添加或删除属性。然而，grace提供了$set（target、key、value）方法。有关详细信息，请访问。
数据更改缓存
根据微信小程序的官方优化建议，grace可以避免以下问题：
频繁取消设置数据
为了解决这个问题，grace引入了一种数据更改缓存机制。下面是一个示例：
//开始缓存数据更改此操作$数据$缓存（）；
//接下来是n密集型数据更新$data name=“doris”this.$data.userCard。no=“610xxx889”this.$data.balance=66666
....
//统一提交此更改$数据$提交（）；
调用$cache（）后，将缓存所有数据更改（不会触发setData）。只有当$commit被调用时，它才会被统一刷新，这避免了频繁调用setData导致的性能消耗。
在后台状态页面上设置数据
当页面进入后台状态（用户不可见）时，它不应继续设置数据。后台状态页的呈现用户感觉不到。此外，后台状态页还将抢先执行前台页。当页面进入后台时，grace将自动停止更新数据。当页面再次转到前景时，渲染将自动启动。
Http协议
Grace通过Promise Request封装wx，并支持拦截器、请求配置等：
安静的API
$http。get（url，[data]，[options]）
$http。post（url，data，[options]）
$http。put（url，数据，[选项]）
$http.delete（url，[data]，[options]）
$http.patch（url，[data]，[options]）
多个并发请求
var getUserRecords=（）=>{
返回this.$http.get（'/user/133/records'）；
}
var getUserProjects=（）=>{
returnthis.$http.get（'/user/133/projects'）；
}
这个。$http。所有（[getUserRecords（），getUserProjects（）]）
.then（this.$http.pread（函数（记录、项目）{
//两个请求现在都已完成
}))
.catch（函数（错误）{
console.log（错误）
})
拦截器
//添加请求拦截器this.$http.interceptors.request。使用（（config，promise）=>{
//在发送请求之前做些什么
config.headers[“X-Tag”]=“grace”；
//使用自定义数据//promise完成请求。resolve（“假数据”）返回配置；
})
//添加一个响应拦截器this.$http.interceptors.response.use(
（回应，承诺）=>{
//对响应数据进行处理。//只需返回响应的数据字段return response.data
},
（错误，承诺）=>{
//处理响应错误//promise.resolve（“ssss”）
}
)
Grace使用的http请求库是$htt
