學習視頻：
https://www.bilibili.com/video/BV1Gv411g7j6?p=88&spm_id_from=pageDriver
資料互動（首頁）
把圖片、視瞥澩放到public目錄下
實際開發中，圖片、視頻、音頻等資源都是放在外部服務器上的，tabBar對應的圖片必須是本地資源，也就是要放在微信小程式專案中，因為微信小程式的代碼包必須控制在2M以內，
然后微信小程式專案中的images的大部分圖片都可以洗掉，留下這些tabBar中的圖片
對于頁面中無序改變的圖片，直接寫上路徑即可，例如：搜索框中的放大鏡；但是對于需要改變的圖片，最好不要在wxml中寫路徑，而是通過資料的方式引入圖片的地址（圖片路徑是定義在json-server的data中的），例如：導航選單、輪播圖等，
保證json-server是啟動的狀態
在index.wxml中，src中輸入http://localhost:3000/Images/@2x_find.png
然后點擊編譯，就能看到圖片被加載出來了
但，如果整個專案中有大量的圖片都是寫這樣的路徑，而且將來把存盤圖片的服務器給換了，那么ip地址肯定發生改變，就需要把這些推按的路徑都給改了，可維護性差，
解決方法：把ip地址和埠號路徑都定義成全域變數，然后在頁面中引入變數即可，以后只需要改變這個變數
在app.js中定義，需要注意的是埠號要寫自己的埠號
在db.json中
{
"news": [
{
"id": "2c9065246df6837f016e8d29c47f0082",
"news_title": "社會心理服務體系建設試點作業方案",
"news_info": "略...",
"image": "Images/img1.png",
"source": "健康中國",
"cjsj": 1574326355000
},
{
"id": "2c9065246df6837f016e8d2298280081",
"news_title": "關于加強心理健康服務的指導意見 ",
"news_info": "略...",
"image": "Images/img2.png",
"source": "十方智育",
"cjsj": 1574325884000
},
{
"id": "2c90652467500e6801685fa5514b0035",
"news_title": "加強社會心理服務體系建設",
"news_info": "略...",
"image": "Images/img3.png",
"source": "十九大",
"cjsj": 1547792896000
}
],
"navs": [
{
"navImg": "Images/@2x_ceping.png",
"navText": "心理測評"
},
{
"navImg": "Images/@2x_yuyue.png",
"navText": "咨詢預約"
},
{
"navImg": "Images/@2x_dayi.png",
"navText": "心理答疑"
},
{
"navImg": "Images/@2x_zhishi.png",
"navText": "心理知識"
},
{
"navImg": "Images/@2x_FM.png",
"navText": "FM"
},
{
"navImg": "Images/@2x_gongyi.png",
"navText": "公益中心"
}
],
"hotArticles": [
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "失眠—你失控情緒的另一個出口",
"CJSJ": 1585708931000,
"ID": "2c9065246e96ad950171339e1a1f07b1",
"IMAGE": "/Images/rmwz01.png",
"INFO": "失眠，已經成為當下許多年輕人的困擾，正如一句網路流行語調侃的那樣，許多人的現狀就是“也不是不困，就是想再等等……到底等什么呢？不知道，就是想再等等，”失眠造成的困擾不言而喻，有時會伴隨著焦慮、抑郁、煩躁等情緒問題，尤其在隔離環境當中，突然沒有平日忙碌的作業來填補時間的情況下，那些",
"pv": 9855
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "最易讓人生病的八種心理情緒",
"CJSJ": 1572253623000,
"ID": "2c9065246df6837f016e119e63b6002a",
"IMAGE": "/Images/rmwz02.png",
"INFO": " 生活中總是伴隨著各種情緒，反映著我們的喜怒哀樂，不過豐富的情緒并不是件好事，有時還會影響我們的身心健康，下面是男人常見的八種心理情緒，小心這些情緒也會讓你生病! 惡劣情緒NO.1：敵意 這是個講究TEAMWORK的社會，不能和他人積極合作更容易引發敵意，專家發現：“敵視情",
"pv": 996
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "成人磨牙暗示著心理壓力大",
"CJSJ": 1572253453000,
"ID": "2c9065246df6837f016e119bccf90029",
"IMAGE": "/Images/rmwz03.png",
"INFO": "在入睡后磨牙，醫學上稱為“磨牙癥”，磨牙癥多見于兒童，不過成年磨牙也逐漸增多趨勢，據了解，這與成人的心理狀況有關，屬于潛意識中的心理壓力， 磨牙意味潛意識中的壓力 口腔生理學與心理學認為，口腔是人體首先興奮的源點，是與外界交流的渠道，且口腔具有表示緊張、悲觀等情緒的功能，當今人",
"pv": 39
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "職場解壓的15個心理技巧",
"CJSJ": 1572253333000,
"ID": "2c9065246df6837f016e1199f6e80028",
"IMAGE": "/Images/rmwz04.png",
"INFO": "練習日常用來減壓的技巧職場人士必須學會用簡單方法放松自己，這是能夠有效地減輕各種壓力所導致的緊張不安的一種重要途徑， 下面列出了日常放松自己或者減輕壓力的一些簡單方法，只要你稍加練習就可以掌握， 1、當面對繁重壓力時，小睡一會，打盹被認為是減少和預防壓力最有效的辦法之一， 2",
"pv": 10
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "從性格判斷你的健康狀況",
"CJSJ": 1572253131000,
"ID": "2c9065246df6837f016e1196e18c0027",
"IMAGE": "/Images/rmwz05.png",
"INFO": "從一個人的性格能判斷其健康狀況嗎？答案是“能”，而且性格還會很大程度上影響到人的健康，健康心理學家表示，人的個性受到遺傳基因和生活環境的雙重影響，個性基本上可以分為以下八類，同時它們也能分別映射出不同疾病，雖然人們不能絕對對號入座，但它至少能提醒我們身邊存在的潛在風險， 1",
"pv": 1088
}
]
}
index.wxml中
<!--首頁頁面-->
<!-- 頂部搜索框 -->
<view id="searchOuterView">
<view id="searchInnerView">
<image src="{{baseUrl + findImg}}"></image>
<text> 搜索</text>
</view>
</view>
<!-- 輪播 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{activeColor}}" circular="{{circular}}">
<!-- 在wxml頁面中需要使用的資料，最好定義在data中 -->
<block wx:for="{{news}}" wx:key="*this">
<!-- 頁面跳轉路徑可以空值 -->
<swiper-item>
<navigator open-type="navigate" url="">
<image src="{{baseUrl + item.image}}"></image>
</navigator>
</swiper-item>
</block>
</swiper>
<!-- 導航選單 -->
<view id="navView">
<view class="navItemView" wx:for="{{navs}}" wx:key="*this">
<image src="{{baseUrl + item.navImg}}"></image>
<text>{{item.navText}}</text>
</view>
</view>
<!-- 在線客服 -->
<view id="onlineView">
<image src="{{baseUrl}}/Images/@2x_zixunpeixun.png"></image>
<text> 咨詢助理在線客服</text>
<!-- 右箭頭實作 -->
<view class="arrow"></view>
</view>
<!-- 精選文章 -->
<!-- 引入模板 -->
<import src="/pages/template/articleTemplate/articleTemplate.wxml"></import>
<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>
<!-- 查看更多 -->
<!-- 添加tab事件 tab事件：手指觸摸后馬上離開，類似滑鼠單擊事件 -->
<view id="moreView" bindtap="gofeaturedArticles">
<text>查看更多</text>
<view class="arrow"></view>
</view>
</view>
<!-- 請求回答 -->
<view id="askView">
<image src="{{baseUrl}}/Images/@2x_fudong.png"></image>
</view>
index.js
// 首頁js檔案
//獲取全域應用實體
const app = getApp()
Page({
// 輪播js
data: {
baseUrl:"",
news:"",
navs:"",
indicatorDots: true,
vertical: false, //滑動方向是否為縱向
autoplay: true, //是否自動切換
interval: 3500, //自動切換時間間隔
duration: 500, //滑動影片時長
activeColor: "#ffffff", //當前選中的指示點顏色
circular: true, // 是否采用銜接滑動
// 這里面的資料要和template模板里面的要對上
articelArray:[]
},
// 創建函式--事件
gofeaturedArticles(){
// 能回退
wx.navigateTo({
url: '/pages/featuredArticles/featuredArticles',
})
},
onLoad() {
//this表示當前頁面物件，可以在page中的函式使用，但是不能在函式里面的函式使用
var _this = this;
//獲取baseURL，復制給當前頁面的data里面的baseUrl變數
var baseUrl = app.globalData.baseUrl;
//把獲取得到的baseURL賦值給當前頁面的baseUrl
//this表示當前頁面的page物件
_this.setData({
baseUrl:baseUrl
})
//獲取得到news的資料（在db.json中）
//wx.request(Object object)：發起 HTTPS 網路請求，在微信公眾號的api--網路中
wx.request({
url: baseUrl + 'news',
method:"GET",
header:{
'content-type':'application/json'
},
//res是服務器回應的資料
success(res){
_this.setData({
news: res.data
})
}
}),
//導航選單
wx.request({
url: baseUrl+"navs",
method: "GET",
header: {
"charset":"utf-8",
'content-type': 'application/json;charset=utf-8'
},
success (res) { // res是服務器回應的資料
_this.setData({
navs: res.data
})
}
}),
//精選文章
wx.request({
//根據訪問量降序排序，也就是訪問量前三的在前面
url: baseUrl+"hotArticles?_sort=pv&_order=desc&limit=3",
method: "GET",
header: {
"charset":"utf-8",
'content-type': 'application/json;charset=utf-8'
},
success (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
})
}
})
}
})
在articleTemplate.wxml中
<!--精選文章串列結構模板-->
<!-- 將靜態文本換成動態的 -->
<template name="articleTemplate">
<view class="articleView">
<view>
<image src="{{IMAGE}}"></image>
</view>
<view class="articleContent">
<view class="artivcleTitle">{{ARTICLES_TITLE}}</view>
<view class="articleDesc">{{INFO}}</view>
</view>
</view>
</template>
寫完后發現控制臺報一個這樣的錯誤
意思是：微信小程式不推薦http，推薦https
解決方法：在微信小程式中—詳情—本地設定—打上勾就可以完美解決
但是最大的一個問題就是亂碼，
目前沒有解決方法，
資料互動(登錄)
從json-server里面查詢是否有鍵值對的用戶名和密碼，
登錄和注冊用的是同一套資料，登錄進行了用戶資料的查詢，注冊是用戶資料的添加，
本地快取
在使用APP的時候，經常會輸入賬號和密碼，下次打開，之前輸入的賬號和密碼會顯示在輸入框中，所以實作該功能使用的是本地快取
全域登錄狀態保存
成功登錄后，保存狀態讓其他頁面知道你登錄成功，
在db.json中
"users":[
{
"id": 1, //用戶編號
"userName": "changan", //用戶名
"password": "123456", //密碼
"nickName": "千年古都", //昵稱
"realName": "長安", //真實姓名
"integral": 886, //積分
"address": "陜西省-西安市", //地址
"phone": 13062547821 //手機號
},
{
"id": 2,
"userName": "zijincheng",
"password": "123456",
"nickName": "故都",
"realName": "紫禁城",
"integral": 960,
"address": "北京市中心",
"phone": 15648979552
}
]
輸入地址訪問到changan這個用戶：
http://localhost:3000/users?userName=changan&password=123456
在login.js中
// 用戶登錄js
//獲取全域應用實體
const app = getApp()
Page({
/**
* 頁面的初始資料
*/
data: {
baseUrl: "",
loginUserInfo:""
},
// 登錄
toLogin(e){
var _this = this;
var userName = e.detail.value.userName;
var password = e.detail.value.password;
console.log("提交的資料",userName,userName);
//輸入的用戶和密碼都快取在本地快取
//如果不存在該key就創建，如果存在就更新
wx.setStorage({
//本地快取key
key:"loginUserInfo",
data:{
userName:userName,
password:password
}
})
//根據用戶名和密碼從json-server服務器查詢資料
wx.request({
url: _this.data.baseUrl + "users?userName="+ userName +"&password=" + password,
method:"GET",
header:{
'content-type':'application/json'
},
//res是服務器回應的資料
success(res){
//判斷資料的長度，如果大于0，表示登錄成功；否則失敗，回傳提示
if(res.data.length > 0){
//把登錄成功的用戶資料放到app.json--globalData--userInfo中
console.log(res.data);
app.globalData.userInfo = res.data[0];
//這里登錄之后不跳轉到目前正在瀏覽的頁面，就直接跳轉到我的頁面
wx.switchTab({
url: '/pages/mine/mine',
})
}else{
//wx.showToast({title: 'title',}) 顯示訊息提示框
wx.showToast({
title: '用戶名或密碼錯誤',
icon:'error',
duration: 2000 //秒數
})
}
}
})
},
//跳轉到注冊頁面 API跳轉
tosifnIn(){
wx.navigateTo({
url: '/pages/signIn/signIn',
})
},
/**
* 生命周期函式--監聽頁面加載
*/
onLoad: function (options) {
//this表示當前頁面物件，可以在page中的函式使用，但是不能在函式里面的函式使用
var _this = this;
//獲取baseURL，復制給當前頁面的data里面的baseUrl變數
var baseUrl = app.globalData.baseUrl;
//把獲取得到的baseURL賦值給當前頁面的baseUrl
//this表示當前頁面的page物件
_this.setData({
baseUrl:baseUrl
}),
//獲取本地快取資料
wx.getStorage({
key:"loginUserInfo",
success(res){
console.log("onLoad函式中，從本地快取獲取得到的資料："+ res.data);
//把獲取得到的本地快取的資料放到data中
_this.setData({
loginUserInfo:res.data
})
}
})
},
在login.wxml中
<view id="input">
<input type="text" placeholder="手機號/用戶名" name="userName" value="{{loginUserInfo.userName}}"></input>
<input type="text" placeholder="密碼" password="*" name="password" value="{{loginUserInfo.password}}"></input>
</view>
資料互動(我的)
用戶沒有登錄就跳轉到登錄頁面，若登錄就進入我的頁面
在mine.js中
// 我的--頁面js
//獲取應用實體
const app = getApp();
Page({
/**
* 頁面的初始資料
*/
data: {
userInfo:""
},
/**
* 生命周期函式--監聽頁面加載
*/
onLoad: function (options) {
var _this = this;
//判斷用戶是否登錄，就是判斷app.globalData.userInfo是否為null
var userInfo = app.globalData.userInfo;
if(userInfo == null){
//如果userInfo為null，跳轉到登錄頁面
wx.redirectTo({
url: '/pages/login/login',
})
}else{
//如果不為null，
_this.setData({
userInfo: userInfo
})
}
},
在mine.wxml中
<!--我的頁面---用戶資訊展示-->
<view id="userInfoView">
<view>昵稱：{{userInfo.nickName}}</view>
<view>來自：{{userInfo.address}}</view>
<view>積分：{{userInfo.integral}}</view>
</view>
資料互動(注冊)
在loginIn.js中
// pages/signIn/signIn.js
//獲取應用實體
const app = getApp();
Page({
/**
* 頁面的初始資料
*/
data: {
region: ['廣東省', '廣州市', '海珠區'],
customItem: '全部',
baseUrl: ""
},
bindRegionChange: function (e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
region: e.detail.value
})
},
toSignIn(e){
var _this = this;
//console.log(e.detail.value);
var submitData = e.detail.value;
//洗掉password
delete submitData.password;
//添加積分
submitData.integral = 0;
//添加address，把region陣列轉換為字串
submitData.address = _this.data.region.join("-");
//
wx.request({
url: _this.data.baseUrl + "users",
method: "POST",
header: {
'content-type': 'application/json'
},
data:submitData,
success(res) { // res是服務器回應的資料
if(res.data){ // 注冊成功
wx.navigateTo({
url: '/pages/login/login',
})
}else{
wx.showToast({
title: '注冊失敗!',
icon: 'none',
duration: 1500
})
}
}
})
},
/**
* 生命周期函式--監聽頁面加載
*/
onLoad: function (options) {
var _this = this;
//判斷用戶是否登錄，就是判斷app.globalData.userInfo是否為null
var baseUrl = app.globalData.baseUrl;
_this.setData({
baseUrl: baseUrl
})
},
在loginIn.wxml中，找到按鈕區域
<!-- 按鈕 -->
<view id="submitButton">
<button form-type="submit">注冊</button>
<view>已有賬號，去登錄</view>
</view>
資料互動(熱門文章)
在db.json中添加資料
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "永不消失的愛",
"CJSJ": 1547801366000,
"ID": "2c90652467500e68016860268e210069",
"IMAGE": "/Images/rmwz11.png",
"INFO": "聽一個女孩兒講她與父母的事，我卻覺得，我們每個人的父母也是如此， 如果你覺得歲月靜好，那一定是有人為你負重前行， 01 在我還沒有開始作業的時候，我總覺得我是家里最累的那個人——每天都在上課，走的最早，回的最晚，在家還要寫作業到半夜，我理所當然的覺得家里的事情就應該是父母在操心，",
"pv": 54
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "抑郁癥與抑郁情緒",
"CJSJ": 1547801334000,
"ID": "2c90652467500e680168602612d80068",
"IMAGE": "/Images/rmwz12.png",
"INFO": "什么是抑郁癥？ 抑郁癥是一種常見的精神疾病，主要表現為情緒低落，興趣減低，悲觀，思維遲緩，缺乏主動性，自責自罪，飲食、睡眠差，擔心自己患有各種疾病，感到全身多處不適，嚴重者可出現自殺念頭和行為，主要表現為：心境低落主要表現為顯著而持久的情感低落，抑郁悲觀，輕者悶悶不樂、無愉快感、",
"pv": 99
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "研究生被導師壓迫跳樓：“人際弱勢者”如何自救？",
"CJSJ": 1547801295000,
"ID": "2c90652467500e68016860257c490067",
"IMAGE": "/Images/rmwz13.png",
"INFO": "這兩天看到一條新聞：武漢理工大學，研三的學生陶崇園，長期受到其導師的精神壓迫，在長期的壓力之下，陶崇園最終不堪重負，選擇了跳樓自殺，看到這個新聞我非常的痛心，為陶崇園在重負之下選擇終結自己的生命，感到非常的惋惜，但陶崇園絕非個例，這世上還有不知多少如陶崇園一樣的人，在承受著來自別",
"pv": 9
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "心理咨詢的作用之一——在情緒中存活",
"CJSJ": 1547801256000,
"ID": "2c90652467500e6801686024e1dd0066",
"IMAGE": "/Images/rmwz14.png",
"INFO": "當我們意外的掉入一條河里，這時候我們可能會先讓自己浮出水面，深呼吸讓自己鎮定下來，觀察下周圍最近的岸邊，是否需要喊人幫忙……有讀者會說了，這種情況是基于你會游泳，沒錯，如果你在水里處在一個沉溺淹沒的狀態，我們根本不可能做出更多思考，以及采取對自己最有利的選擇， 有時候我們甚至都沒",
"pv": 20
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "心理史上最大騙局：“星座測驗太準啦！”",
"CJSJ": 1547801193000,
"ID": "2c90652467500e6801686023ec1c0065",
"IMAGE": "/Images/rmwz15.png",
"INFO": "-01- “他要和我分手，嫌棄我是個處女!”He Broke Up With Me Coz I'm a Virgin話說，電視劇《龍門鏢局》里有個四處留情的風流男子 —— 恭叔，這一天，鏢局來了個恭叔的前女友 —— 露露，鏢局的小伙伴們都在八卦：“你和恭叔當初是為啥分手噠？”下面",
"pv": 618
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "小心！微表情泄露了你的秘密",
"CJSJ": 1547801105000,
"ID": "2c90652467500e680168602295500064",
"IMAGE": "/Images/rmwz16.png",
"INFO": "小心！微表情泄露了你的秘密當下，隨著許許多多影視資源的問世，越來越多的人將目光投向了心理學中的微表情，在眾多影視劇中，微表情表現得神秘、莫測，仿佛掌握了微表情就征服了全世界，很多人慢慢開始崇拜掌握著這一技之長的人，那么，什么是微表情？你對微表情究竟了解多少？下面，就讓我們一起走進",
"pv": 982
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "我們為什么說臟話",
"CJSJ": 1547800979000,
"ID": "2c90652467500e6801686020a8020063",
"IMAGE": "/Images/rmwz17.png",
"INFO": "這是一篇臟話百科全書，不謝，我也知道今天我巨他媽好看！ 臟話，一種神奇的語言系統你能想象，一個沒有臟話的世界，將如何生存嗎？反正我不能，臟話，現在已經成為中國語言中非常發達的一項語言分支，它可以用來簡化語言，規避歧義，提高語言效率，比如，“這個解釋他媽的不清楚”和“這個他媽的解釋",
"pv": 138
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "為什么上班都是坐著，還會感覺疲憊不堪？",
"CJSJ": 1547800887000,
"ID": "2c90652467500e680168601f41010062",
"IMAGE": "/Images/rmwz18.png",
"INFO": "有很多人上班疲憊回家之后就躺在沙發上休息看電視或者玩手機；在午后或者下午三四點之后分心注意力難以集中接著就走出去抽一口煙又或者刷刷微信放松一下，這些方式都無法解除大腦的疲勞，所以這一次跟焦糖Pan選擇了這本日本暢銷榜上的《最高休息法》，用正確的方式讓大腦得到休息，如果大腦得到休息",
"pv": 962
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "為什么你記不住別人的名字",
"CJSJ": 1547800736000,
"ID": "2c90652467500e680168601cf49c0061",
"IMAGE": "/Images/rmwz19.png",
"INFO": "我們經常在聚會或是會議上聽到別人說：“我擅長記人的臉，但是記不住人的名字，”這種常見的說法正確嗎？現在，讓我們開始一場關于記憶心理的旅程，我要告訴你，我們關于臉部、名字的記憶，并不像它看起來的那么簡單，人類確實是識別面孔的專家，我們中的大都數人都能識別出成千上萬張的臉，一切都是這",
"pv": 28
},
{
"SOURCE": "十方智育",
"ARTICLES_TITLE": "完美主義與自殺風險 ▎無法滿足的期望與標準",
"CJSJ": 1547800627000,
"ID": "2c90652467500e680168601b4aba0060",
"IMAGE": "/Images/rmwz20.png",
"INFO": "根據世界衛生組織（WHO）的統計，每45秒就有一個人自殺，為了防止悲劇發生，我們需要了解更多影響某些個體容易產生自殺想法以及自殺行為的因素，其中一個風險因素就是完美主義：一種強迫自己時刻達到超過自身能力標準的傾向或/和滿足或超越他人過高期望的自我需要， 1995年，心理學家Sid",
"pv": 118
}
在articleTemplate.wxss中的articleTitle加多一個寬度
在featuredArticles.wxml中
<!-- 正在加載 -->
<view id="loadingView" wx:if="{{isLoading}}">
<image src="{{baseUrl + lodingImg}}"></image>
<text> 正在加載更多資源...</text>
</view>
<!-- 最后一頁 -->
<view id="loadingView" wx:if="{{noData}}">當前已是最后一頁</view>
上提加載
1、詳情頁面不可能一上來就顯示全部頁面，肯定要做分頁處理，
在featuredArticles.js里面做分頁處理
2、優化代碼，實作復用
將featuredArticles.js里面的代碼封裝重復部分做優化
featuredArticles.js中
//獲取應用實體
const app = getApp();
//封裝代碼，提高代碼復用性
//通過引數傳遞this物件
function getData(pageData){
//通過引數pageData獲取baseUrl和pageNum
var baseUrl = pageData.data.baseUrl;
var pageNum = pageData.data.pageNum;
//獲取總數量
var count = pageData.data.count;
//判斷是否是最后一頁
if(count == pageData.data.hotArticles.length){
pageData.setData({
isLoading:false,
noData:true
})
}else{
//顯示第一頁的資料
wx.request({
//根據訪問量降序排序，一頁顯示6條資料
url: baseUrl+"hotArticles?_page="+pageNum+"&_limit=6",
method: "GET",
header: {
"charset":"utf-8",
'content-type': 'application/json;charset=utf-8'
},
success (res) {
console.log("第"+pageNum+"頁的資料：",res.data);
//將回應過來的資料的IMAGE的路徑之前拼接上baseUrl
for(var i=0 ;i<res.data.length;i++){
res.data[i].IMAGE = baseUrl + res.data[i].IMAGE;
}
pageData.setData({
hotArticles: pageData.data.hotArticles.concat(res.data),
isLoading:false //讓 正在加載更多資源 隱藏
})
}
})
}
}
Page({
/**
* 頁面的初始資料
*/
data: {
hotArticles:[],
baseUrl: "",
lodingImg:"",
//pageNum變數：要請求的頁碼
pageNum:1,
isLoading:false, //加載更多資源
noData:false, //最后一頁
count:"" //總數量
},
/**
* 生命周期函式--監聽頁面加載
*/
onLoad: function (options) {
//this表示當前頁面物件，可以在page中的函式使用，但是不能在函式里面的函式使用
var _this = this;
//獲取baseURL，復制給當前頁面的data里面的baseUrl變數
var baseUrl = app.globalData.baseUrl;
//把獲取得到的baseURL賦值給當前頁面的baseUrl
//this表示當前頁面的page物件
_this.setData({
baseUrl:baseUrl,
lodingImg:"/Images/loading.gif"
}),
//獲取所有精選文章
//獲取總數量：獲取所有文章，通過陣列長度得到總數量
wx.request({
url: baseUrl+"hotArticles",
method: "GET",
header: {
"charset":"utf-8",
'content-type': 'application/json;charset=utf-8'
},
success (res) {
//console.log("總數量：",res.data.length);
_this.setData({
count: res.data.length
})
//獲取第一頁資料
getData(_this);
}
})
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
var _this = this;
//pageNum + 1： 每次上提頁碼都需要+1
_this.setData({
pageNum:_this.data.pageNum + 1,
isLoading: true //讓 正在加載更多資源 顯示
})
getData(this);
},
})
3、加載資料沒有或者網速慢的時候，顯示最后一頁或者正在加載…
featuredArticles.wxml，在最后面多加一個view
<!-- 正在加載 -->
<view id="loadingView" wx:if="{{isLoading}}">
<image src="{{baseUrl + lodingImg}}"></image>
<text> 正在加載更多資源...</text>
</view>
<!-- 最后一頁 -->
<view id="loadingView" wx:if="{{noData}}">當前已是最后一頁</view>
下拉重繪
本頁面開啟下拉重繪，featuredArticles.json
{
"usingComponents": {},
"navigationBarTitleText": "精選文章",
"enablePullDownRefresh": true //開啟下拉重繪
}
featuredArticles.js的onReachBottom中
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
var _this = this;
//pageNum + 1： 每次上提頁碼都需要+1
_this.setData({
pageNum:_this.data.pageNum + 1,
isLoading: true //讓 正在加載更多資源 顯示
})
getData(this);
},
資料互動(文章詳情)
頁面傳參
app.json中，創建文章詳情頁
文章標題
articlesDetails.json
{
"usingComponents": {},
"navigationBarTitleText": "文章詳情"
}
添加編譯模式
在模板articleTemplate.wxml中
<!--精選文章串列結構模板-->
<!-- 將靜態文本換成動態的 -->
<template name="articleTemplate">
<navigator class="articleView" url="/pages/articlesDetails/articlesDetails?id={{ID}}" open-type="navigate">
<view>
<!-- 模板中的動態資料，只需要使用物件的key即可 -->
<image src="{{IMAGE}}"></image>
</view>
<view class="articleContent">
<view class="artivcleTitle">{{ARTICLES_TITLE}}</view>
<view class="articleDesc">{{INFO}}</view>
</view>
</navigator>
</template>
articlesDetails.wxml
<!--文章詳情-->
<!-- 引入模板 -》富文本決議 -->
<import src="../../wxParse/wxParse.wxml"/>
<view class="articleTitle">{{articleDetail.articles_title}}</view>
<view class="articleAuthor">來源:{{articleDetail.source}}</view>
<view class="articleImg">
<image src="https://www.hnsfxlzx.com/{{articleDetail.image}}"></image>
</view>
<view>{{articleDetail.articles_info}}</view>
<!--富文本決議-->
<view class="articleContent">
<template is="wxParse" data="{{wxParseData:content.nodes}}" />
</view>
articlesDetails.wxss
/* 引入模板*/
@import "../../wxParse/wxParse.wxss";
.articleTitle{
height: 88rpx;
line-height: 88rpx;
font-size: 30rpx;
font-weight: bold;
}
.articleImg{
text-align: center;
margin: 20rpx 0;
}
.articleContent{
width: 710rpx;
}
.articleAuthor{
font-size: 26rpx;
color: #A8A8A8;
line-height: 36rpx;
}
.wxParse-span{
font-size: 24rpx!important;
color: #353535!important;
}
.wxParse-p{
line-height: 48rpx!important;
}
articlesDetails.js
// 引入WxParse模板
var WxParse = require('../../wxParse/wxParse.js');
Page({
/**
* 頁面的初始資料
*/
data: {
articleDetails:""
},
/**
* 生命周期函式--監聽頁面加載
*/
onLoad: function (options) {
var _this = this;
//獲取從文章串列頁傳遞進來的id值
var id = options.id;
//根據id獲取文章詳情
wx.request({
url: 'https://www.hnsfxlzx.com/www/article/get/' + id,
method: "GET",
header: {
"charset":"utf-8",
'content-type': 'application/json;charset=utf-8'
},
success (res) {
//console.log(res.data.page);
//微信WxParse模板
let result = res.data.page;
// WxParse.wxParse(bindName , type, data, target,imagePadding)
// * 1.bindName系結的資料名(必填)，決議成功之后的內容系結到該資料名content上；
// * 2.type可以為html或者md(必填)
// * 3.data為傳入的具體資料(必填)
// * 4.target為Page物件,一般為this(必填)
// * 5.imagePadding為當圖片自適應是左右的單一padding(默認為0,可選)
WxParse.wxParse('content', 'html', result.articles_info, _this, 5);
_this.setData({
articleDetails: res.data.page
})
}
})
},
})
發布流程
開發版本 -》體驗版 -》提交審核 -》線上版本；
進入微信公眾號平臺，掃碼登錄
登錄完成后，直接就是首頁的資訊，完善小程式信
然后填寫資訊
填寫完成就提交，提交后就到第三步前往發布
專案右上角有個上傳，點擊
點擊確定之后填寫資訊
點擊確定
點擊上傳后
然后滑到最后，只有有開發版本有這個資訊
還可以選擇為體驗版本
點擊提交
然后掃碼查看
前提是有體驗賬號
然后回頭看，已經變成體驗版
體驗代碼測驗沒問題就可以提交審核了
點擊提交審核
點擊繼續即可
然后完善資訊
做推廣的話，點擊設定
然后找到物料下載
十方智育到此結束，中間還有一些頁面的功能相類似的可以自己動手實作一下，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/395147.html
標籤：其他
上一篇：3秒了解Ajax資料互動
下一篇：蕪湖，這是一棵會唱歌的圣誕樹