朋友們，此筆記適合一邊看視頻一邊對照鸵膏，或者學完課程后回顧重點租副。沒看視頻的看這個筆記可能會不知所云。
如果有疑問或者建議歡迎提出较性，以幫助我完善筆記用僧，謝謝结胀。
一，小程序特點
- 免安裝
- 類似于app
- 必須在微信中使用
二责循，用戶獲得小程序方式
- 搜索與附近的小程序
- 掃一掃與長按識別小程序碼
- 好友分享
- 與公眾號關(guān)聯(lián)
- 第三方小程序應用商店
- 小程序之間互相跳轉(zhuǎn)
三糟港，小程序的官方文檔
地址：https://developers.weixin.qq.com/miniprogram/dev/
四，小程序開發(fā)流程
- 注冊小程序
- 代碼開發(fā)
- 提審（微信官方審核）
- 上線
五院仿，注冊小程序
我的注冊郵箱是：12273056@bjtu.edu.cn
六秸抚，新建小程序項目
打開微信開發(fā)者工具（開發(fā)者工具下載地址)，登陸歹垫，創(chuàng)建目錄剥汤，填寫appID（微信公眾平臺--設(shè)置--開發(fā)設(shè)置），會有一個默認的hello world項目排惨。
七吭敢，代碼結(jié)構(gòu)（慕課網(wǎng)的信貸demo）
八，代碼編寫參考
- 主要參考小程序開發(fā)文檔的框架部分：https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html暮芭。
- 我的代碼在github上：https://github.com/beautiful523/wx_xcx_xindai/tree/master/weichat_mini_program
九鹿驼，底部導航欄
底部導航欄tabBar寫到app.json里面，因為是全局的元素
十辕宏，首頁開發(fā)
- 輪播圖：微信公眾平臺--小程序開發(fā)--組件畜晰，寫到index.wxml
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
index.wxml中，輪播圖下面的內(nèi)容類似前端瑞筐，講div改成view標簽凄鼻，在wxss里面設(shè)置相應的樣式
聯(lián)系客服：在button上加一個屬性open-type='contact'即可
點擊查看詳情：在button上加一個屬性bindtap='to_detail'綁定點擊響應函數(shù)，然后在js中添加to_detail函數(shù)
十一聚假，加入頁面開發(fā)
- 電話咨詢：在button上加一個屬性bindtap='te le'綁定點擊響應函數(shù)野宜，然后在js中添加tele函數(shù)
tele: function(){
wx.makePhoneCall({
phoneNumber: '13611044648',
})
}
十二，API的請求
- 目標：從服務端get產(chǎn)品列表需要的數(shù)據(jù)
- 微信開發(fā)者工具-->右上角更多-->詳情-->不校驗合法域名魔策、web-view（業(yè)務域名）匈子、TLS 版本以及 HTTPS 證書-->鉤上
- 本地啟動一個flask服務，我的代碼在github上面：https://github.com/beautiful523/wx_xcx_xindai/tree/master/wechat_service
- 在首頁的js文件中定義一個getProList的方法闯袒，向服務器發(fā)請求：
getProList: function(){
var self = this;
wx.request({
url: 'http://127.0.0.1:5000/',
method:'GET',
success: function(res){
self.setData({
pro_list: res.data
})
}
})
}
- 在同一個js文件里的onload函數(shù)里面執(zhí)行g(shù)etProList():
onLoad: function () {
this.getProList()
}
十三虎敦，不同頁面的傳值方法(一)：路由里面帶參數(shù)傳
- 例如：將首頁的值傳到詳情頁
- app.json--pages的數(shù)據(jù)里面加"pages/detail/detail"--pages目錄下會自動多出來detail模塊
- 編寫首頁js的to_detail函數(shù)，把首頁中的各個title值傳到相應的詳情頁：
to_detail: function(e){
var index = e.currentTarget.dataset.aaa;
var proList = this.data.pro_list;
var title = proList[index].title;
wx.navigateTo({
url: '/pages/detail/detail?title='+title,
})
},
- 在詳情頁的js中將傳過來的title賦值給詳情頁頁面初始數(shù)據(jù)data
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
title:null,
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
this.setData({
title: options.title,
})
},
})
- 在詳情頁的wxml部分直接用雙花括號調(diào)用title數(shù)據(jù)：
<text>這篇文章的標題是：{{title}}</text>
- 這樣政敢，當你在首頁單擊查看詳情其徙，就會直接跳轉(zhuǎn)到詳情頁，并顯示響應的數(shù)據(jù)喷户。
十四唾那，不同頁面的傳值方法(二)：全局變量
- 在app.js里面globalData加一條數(shù)據(jù):
host:'http://localhost:5000', - 在首頁js獲取實例才能使用app.js里面的東西
//index.js
//獲取應用實例
const app = getApp()
- url就可以直接寫 app.globalData.host，來代替
http://localhost:5000
wx.request({
url: app.globalData.host,
method:'GET',
success: function(res){
self.setData({
pro_list: res.data
})
},
fail:function(){
console.log(111)
}
})
十五褪尝，不同頁面的傳值方法(三)：setStorage本地緩存
- 最大支持緩存10兆的內(nèi)容
- 修改首頁js的to_detail函數(shù)闹获，通過本地緩存把首頁中的各個desc值傳到相應的詳情頁：
var desc = proList[index].desc;
wx.setStorageSync('desc', desc)
- 在詳情頁的js中獲取本地緩存中的desc并賦值給詳情頁頁面初始數(shù)據(jù)data
onLoad: function (options) {
var desc = wx.getStorageSync('desc');
this.setData({
title: options.title,
desc: desc,
})
}
- 在詳情頁的wxml部分直接用雙花括號調(diào)用title數(shù)據(jù)：
<text>這篇文章的標題是：{{title}}</text>
<text>這篇文章的內(nèi)容是：{{desc}}</text>
