page順序，每次刷新會到入口，所以自定義一個編譯模式
不設置寬高，自己會自動給值
字體不用rpx
利用display:flex-----顯示一行
<view class='shop-star'>
<view class='star-after'>★★★★★</view>
<view class='star-before'>★★★★★</view>
</view>
.shop-star{
position: absolute;
top: 20rpx;
right: 20rpx;
color: #e2e2e2;
}
.star-before{
color: #f19e38;
position: absolute;
top: 0rpx; left: 0rpx;
width: 80%;
overflow: hidden;
}
父子標籤都給絕對定位，，那麼子標籤可以按照父標籤來定，也就是子絕父相的原理
用前端編譯工具執行微信小程序代碼
用webstorm打開微信小程序代碼 setting 中搜索file Type
點擊要設置的文件例如html css
然後在第二個點擊＋號添加*.wxss 和*.wxml
sublime裏面找到查看-->語法-->點擊html或css
查看後臺穿過來的數據在AppData中看
生命週期
生命週期函數：app.js index.js
app.js 把原有的內容刪掉--->App--->Teb鍵
index.js 把原有的內容刪掉--->page--->Teb鍵
請求數據
請求數據：（wx.request）
request---Tab
報錯：
https://locally.uieee.com 不在以下 request 合法域名列表中，
請參考文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
解決辦法：點擊詳情--->不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書
與vue雙向綁定不同點（需要通過this.setData調用）
在微信小程序中我們一般通過以下方式來修改data中的數據
this.setData({
index1: e.detail.value
})
比如在函數裏面修改數據
bindFaChange1: function (e) {
this.setData({
index1: e.detail.value
})
}
但是當我們通過wx.request請求網絡數據成功後綁定數據時候報以下錯誤
this.setData is not a function
代碼如下：
doCalc:function(){
wx.request({
url: url,
method:'POST',
header: {
'content-type': 'application/json' // 默認值
},
success: function (res) {
if (res.data.code == 0){
this.setData({
maxCount: res.data.maxCount
});
}
}
})
}
這是因爲this作用域指向問題 ，success函數實際是一個閉包 ， 無法直接通過this來setData
那麼需要怎麼修改呢？
我們通過將當前對象賦給一個新的對象
var _this = this;
然後使用_this 來setData就行了
完整代碼
另外說一下 ， 在es6中 ， 使用箭頭函數是不存在這個問題的
例如 ：
setTimeout( () => {
console.log(this.type + ' says ' + say)
}, 1000)
當我們使用箭頭函數時，函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
並不是因爲箭頭函數內部有綁定this的機制，實際原因是箭頭函數根本沒有自己的this，它的this是繼承外面的，因此內部的this就是外層代碼塊的this。
輪播圖問題
輪播圖好看：媒體組件中mode 13種裁剪
mode=‘aspecttFill’保持等比縮放
lazy-load 如果圖片不出來
生命週期，請求數據
Page({
/**
* 頁面的初始數據
*/
data: {
msg:"數據綁定用{{}}",
slideList:[],
navList:[]
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
// console.log("監聽頁面加載")
// console.log(wx) -----對象
// console.log(window)--------undefined
// 請求數據
// wx.request({
// url: '', //請求地址---https格式
// data: '', //請求的參數
// header: {}, //設置請求的header
// method: 'GET', //請求的方式---一定是大寫
// dataType: 'json', //返回的格式
// responseType: 'text', //返回的是文本類型
// success: function(res) {}, //成功的回調函數
// fail: function (res) { },//失敗的回調函數
// complete: function (res) { },//接口調用結束的回調函數，調用成功，失敗都執行
// })
var _this = this;
wx.request({
url: 'https://locally.uieee.com/slides',
data: '',
header: {},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: function(res) {
// console.log(res);
// this.slideList = res.data; 數據未渲染上
// console.log(this.slideList);
// 1.跟新數據
// 2.跟新視圖
_this.setData({
slideList:res.data
});
},
fail: function(res) {},
complete: function(res) {},
})
wx.request({
url: 'https://locally.uieee.com/categories',
data: '',
header: {},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: function(res) {
_this.setData({
navList:res.data
})
},
fail: function(res) {},
complete: function(res) {},
})
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
// console.log("監聽頁面初次渲染完成")
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
// console.log("監聽頁面顯示")
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
// console.log("監聽頁面影藏")
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
// console.log("監聽頁面卸載")
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
wx:for="{{數組}}" wx:key="id" 默認爲索引index 對象item