微信小程序（第二十七章）- 数据交互页面优化
@[TOC](微信小程序（微信小程序（第二十七章）- 数据交互搜索框及全局)共
前言
我们在实际开发中，图片、视频、音频等资源都是放在外部服务器上的，tabBar对应的图片必需是本地图片；因为微信小程序代码包必需控制在2MB以内；
既然我们json-sever服务器已经搭建完成，不用说数据交互安排！我们页面中需要的图片和数据都从json-server中获取；
首页（进行数据交互优化）
搜索框图片
对于页面中无需改变的图片，我们直接在wxml里面写路径即可，比如：搜索框里面的放大镜；但是对于需要改变的图片，我们最后不要在wxml中直接写路径，而是通过数据的方式引入图片的地址（图片的路径是定义在json-server的data中），比如导航菜单、轮播图；
- 搜索框图片不怎么改变，某地说，直接写图片路径。
<image src="http://localhost:3004/images/xsdkq_search.png">image>
下面写法的问题：如果整个项目有10000张图片都是这么写的路径，如果将来把存储图片的服务器换了一个，那么ip地址肯定发生了改变，我们需要把10000张图片的路径都改了；
代码可维护性太低；
解决方案：把ip地址和端口号都定义为变量，然后在页面中引入变量即可；将来只需要改变变量即可；
但是这个最好定义成全局的，因为所有页面都要使用；
- 在app.js的globalData里面定义:
baseUrl:"http://localhost:3004/"; - 哪个页面需要用到baseUrl，就在对应的js通过app对象获取即可；
- 怎么获取全局唯一app示例？
const app = getApp() - 通过app实例获取得到baseUrl;
- 把baseUrl赋值给当前页面的某个变量；
app.js代码
- 怎么获取全局唯一app示例？
globalData: {
userInfo: null,
baseUrl:"http://localhost:3004/"
}
index.js代码
// 获取应用实例
const app = getApp()
data: {
baseUrl:""
}
onLoad() {
//获取baseUrl，赋值给当前页面的data里面的baseUrl变量
var baseUrl = app.globalData.baseUrl;
//把获取得到的baseUrl赋值给当前页面的baseUrl
//this表示当前页面的page对象
this.setData({
baseUrl:baseUrl
})
}
index.wxml代码
<image src="{{baseUrl}}images/xsdkq_search.png">image>
轮播图
定义轮播图所需的数据；
注：此微信小程序轮播图不带有点击详情功能，后期小程序完成后根据实情进行优化。
index.js代码
imgUrls: ['/images/xsdkq_index_lbt1.png', '/images/xsdkq_index_lbt2.png', '/images/xsdkq_index_lbt3.png','/images/xsdkq_index_lbt4.png']
index.wxml代码
<swiper indicator-dots="{{indicatorDots}}" indicator-active-color="{{activeColor}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item>
<image src="{{baseUrl}}{{item}}">image>
swiper-item>
block>
swiper>
导航菜单
导航菜单图片可以定义成动态的，因为很多app和pc端，在某个节日，比如：春节、双11都会改变图片的图标，那么我们也通过数据来定义；
- 定义导航菜单所需的数据；
代码如下：
<view id="navView">
<view class="navItemView" bindtap="goPurpose">
<image src="{{baseUrl}}images/xsdkq_index_dhym_img1.png">image>
<text>开发目的text>
view>
<view class="navItemView">
<image src="{{baseUrl}}images/xsdkq_index_dhym_img2.png">image>
<text>工作原理text>
view>
<view class="navItemView">
<image src="{{baseUrl}}images/xsdkq_index_dhym_img4.png">image>
<text>注意事项text>
view>
<view class="navItemView" bindtap="goReview">
<image src="{{baseUrl}}images/xsdkq_index_dhym_img3.png">image>
<text>用户评价text>
view>
<view class="navItemView">
<image src="{{baseUrl}}images/xsdkq_index_dhym_img5.png">image>
<text>使用评价text>
view>
<view class="navItemView">
<image src="{{baseUrl}}images/xsdkq_index_dhym_img6.png">image>
<text>提供建议text>
view>
view>
精选文章
首页的精选文章获取的是访问量前三的数据；
- 定义精选文章所需的数据；
- 在index.js的onload函数中，获取得到访问量前三的文章，赋值给data里面的hotArticles变量，然后遍历在wxml精选文章列表中；
- 模板图片展示问题：我们引入模板，不会走模板的js文件，并且引入过来之后，当前页面的baseUrl识别不出来；那么我们可以对获取的数据进行操作，把数据的Url拼接上baseUrl;
articleTemplate.wxml代码
<template name="articleTemplate">
<view class="articleView">
<view>
<image src="{{IMAGE}}">image>
view>
<view class="articleContent">
<view class="articleTitle">
{{ARTICLES_TITLE}}
view>
<view class="articleDesc">
{{INFO}}
view>
view>
view>
template>
index.wxml代码
<view id="hotArticleView">
<view id="hotArticleTitleView">
精选文章
view>
<block wx:for="{{hotArticles}}" wx:for-item="article" wx:key="*this">
<template is="articleTemplate" data="{{...article}}">template>
block>
<view id="moreView" bindtap="goHotArticlePage">
<text>查看更多text>
<view class="arrow">view>
view>
view>
index.js代码
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
baseUrl:"",
lbt:"",
navs:"",
hotArticles:[],
//轮播图
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 3500,
duration: 500,
activeColor:"#fff",
circular:true
},
goHotArticlePage(){
wx.navigateTo({
url: '/pages/hotArticle/hotArticle',
})
},
goReview(){
wx.navigateTo({
url: '/pages/review/review',
})
},
goPurpose(){
wx.navigateTo({
url: '/pages/purpose/purpose',
})
},
onLoad() {
var _this = this;
//获取baseUrl，赋值给当前页面的data里面的baseUrl变量
var baseUrl = app.globalData.baseUrl;
/*
把获取得到的baseUrl赋值给当前页面的baseUrl
this表示当前页面的page对象
*/
this.setData({
baseUrl:baseUrl
})
//获取得到lbt的数据
wx.request({
url: baseUrl + "lbt",
method:"GET",
header:{
'content-type':'application/json'
},
success(res){//res是服务器响应数据
_this.setData({
lbt:res.data
})
}
})
//获取得到navs的数据
wx.request({
url: baseUrl + "navs",
method:"GET",
header:{
'content-type':'application/json'
},
success(res){//res是服务器响应数据
_this.setData({
navs:res.data
})
}
})
//获取得到hotArticles的数据
wx.request({
url: baseUrl + "hotArticles?_sort=pv&_order=desc&_limit=3",
method:"GET",
header:{
'content-type':'application/json'
},
success(res){//res是服务器响应数据
//把响应过来的数据的IMAGE的路径之前拼接上baseUrl
for(var i=0;i<res.data.length;i++){
res.data[i].IMAGE = baseUrl + res.data[i].IMAGE;
}
_this.setData({
hotArticles:res.data
})
}
})
}
})
登录
数据定义
登录和注册使用的是同一套数据，无非登录是进行用户数据的查询，注册是用户数据的添加
登录验证
所谓的登录验证，就是在已有的数据库中查找是否存在输入登录信息。
对输入信息进行提取判断。
本地缓存
我们在使用APP时登录信息会存储
- 把输入的用户名和密码放在本地缓存；
wx.setStorage(Object object)将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
wx.setStorageSync(string key, any data, Boolean encrypt)wx.setStorage 的同步版本
同步：按照顺序执行
异步：同时执行
我们使用wx.setStorage(Object object)；
login.js代码
// pages/login/login.js
// 获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
baseUrl:""
},
//登录函数
toLogin(e){
var _this = this;
//获取提交的用户名和密码用变量存储
var userName=e.detail.value.userName;
var userPwd=e.detail.value.userPwd;
console.log(userName,userPwd);
//只要输入了用户名和密码，都缓存在本地缓存
//不存在key，创建；存在，更新
wx.setStorage({
//本地缓存的key
key:"loginUserInfo",
data:{
userName:userName,
userPwd:userPwd
}
})
//根据用户名和密码从json-server服务器查询数据
wx.request({
url: _this.data.baseUrl+"users?"+"(userName="+userName+"|phone="+userName+")"+"&userPwd="+userPwd,
method:"GET",
header:{
'content-type':'application/json'
},
success(res){//res是服务器响应的数据
//判断数组的长度，如果>0，表示登录成功！否则登录失败，登录失败给其弹框提示
if(res.data.length > 0){
wx.switchTab({
url: '/pages/my/my',
})
}else {
wx.showToast({
title: '用户名密码错误',
icon:'error',
duration:1500
})
}
}
})
},
toRegPage(){
wx.navigateTo({
url: '/pages/register/register',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
var baseUrl = app.globalData.baseUrl;
this.setData({
baseUrl:baseUrl
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
获取用户名和密码
在onload函数中获取本地缓存数据，然后把缓存的用户名和密码显示到输入框中；
wx.getStorage(Object object) 从本地缓存中异步获取指定 key 的内容。缓存相关策略请查看 存储。
wx.getStorageSync(string key, Boolean encrypt) wx.getStorage 的同步版本。
我们获取缓存数据，wx.getStorageSync(string key, Boolean encrypt)
login.js代码
onLoad: function (options) {
var _this = this;
var baseUrl = app.globalData.baseUrl;
this.setData({
baseUrl:baseUrl
})
//获取缓存数据
wx.getStorage({
key: 'loginUserInfo',
success (res) {
console.log(res.data)
_this.setData({
loginUserInfo:res.data
})
}
})
},
login.wxml代码
<form bindsubmit="toLogin">
<view id="inputView">
<input type="text" placeholder="手机号/用户名" name="userName" value="{{loginUserInfo.userName}}">input>
<input type="text" placeholder="密码" password name="userPwd" value="{{loginUserInfo.userPwd}}">input>
view>
<view id="buttonView">
<button form-type="submit">登录button>
<button bindtap="toRegPage">注册button>
<view>忘记密码view>
view>
form>
登录状态保存
在项目中，很多页面是在登录后才能访问；
login.js代码
// pages/login/login.js
// 获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
baseUrl:"",
loginUserInfo:""
},
//登录函数
toLogin(e){
var _this = this;
//获取提交的用户名和密码用变量存储
var userName=e.detail.value.userName;
var userPwd=e.detail.value.userPwd;
console.log(userName,userPwd);
//只要输入了用户名和密码，都缓存在本地缓存
//不存在key，创建；存在，更新
wx.setStorage({
//本地缓存的key
key:"loginUserInfo",
data:{
userName:userName,
userPwd:userPwd
}
})
//根据用户名和密码从json-server服务器查询数据
wx.request({
url: _this.data.baseUrl+"users?"+"(userName="+userName+"|phone="+userName+")"+"&userPwd="+userPwd,
method:"GET",
header:{
'content-type':'application/json'
},
success(res){//res是服务器响应的数据
//判断数组的长度，如果>0，表示登录成功！否则登录失败，登录失败给其弹框提示
if(res.data.length > 0){
//把登录成功的用户数据放到globalData的userInfo中
app.globalData.userInfo = res.data[0];
wx.switchTab({
url: '/pages/my/my',
})
}else {
wx.showToast({
title: '用户名密码错误',
icon:'error',
duration:1500
})
}
}
})
},
toRegPage(){
wx.navigateTo({
url: '/pages/register/register',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
var baseUrl = app.globalData.baseUrl;
this.setData({
baseUrl:baseUrl
})
//获取缓存数据
wx.getStorage({
key: 'loginUserInfo',
success (res) {
console.log(res.data)
_this.setData({
loginUserInfo:res.data
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
我的
- 如果用户没有登录跳转到登录页面；如果已经登录，则进入我的页面；
- 在我的页面展示用户的动态信息；
my.js代码
// pages/my/my.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
userInfo:""
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
//判断用户是否登录
var userInfo = app.globalData.userInfo;
if(userInfo == null){
//没有登录
wx.redirectTo({
url: '/pages/login/login',
})
}else{
_this.setData({
userInfo:userInfo
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
goAboutUs(){
wx.navigateTo({
url: '/pages/aboutUs/aboutUs',
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
})
my.wxml代码
<view id="userInfoView">
<view>昵称:{{userInfo.nickName}}view>
<view>来自:{{userInfo.address}}view>
view>
注册
关于注册，要避免手机号、验证码和用户名的重复；
在之前的静态页面阶段，我们以实现了表单组件提交的数据；
注意：提交给json-server的数据要和数据库存储格式一样