封亞飛---64761294---全棧攻城獅養成
python+小程式開發全棧
1 前端開發
1.1全域性配置
app.json檔案用於小程式全域性配置
app.json
json不可註釋
-
pages：頁面結構列表
-
示例：
"pages": [ "pages/index/index", "pages/logs/index" ] -
pages會表明小程式全域性所有頁面路徑資訊
-
-
window：對頂部窗體資訊的配置
-
窗體名引數 "navigationBarTitleText": "Demo" -
窗體背景色引數 "navigationBarBackgroundColor": "#000000" 僅支援 HexColor -
窗體標題顏色引數 ”navigationBarTextStyle“：”white“ 僅支援stringColor
-
-
tabBar：對底部多頁面導航的配置
-
color：tab文字預設顏色，僅支援HexColor
-
selectedColor：tab選中後顏色，僅支援HexColor
-
list：tab列表，最少2個，最多5個tab（以下所用icon尺寸：81px*81px，<=40kb，不支援網路圖片）
-
pagePath引數：頁面路徑
-
text：tab上按鈕文字
-
iconPath：按鈕icon路徑
-
selectedIconPath：選中後的圖片路徑
-
-
1.2 元件
1.2.1 text元件
編寫文字資訊，類似於HTTP中的span
1.2.2 view元件
容器，類似於HTTP中的div
1.2.3 image元件
圖片顯示元件
1.3 頁面flex佈局
一種非常方便的通用佈局方式
1.3.1 flex-direction
規定主軸方向
-
column：主軸豎直
-
row：主軸水平
1.3.2 justify-content
規定主軸方向上的排列方式
-
flex-start/end
-
center
-
space-around
-
space-between
1.3.3 align-items
規定副軸方向排列方式
- flex-start/end
- center
- space-around
- space-between
1.3.4 示例：
display:flex; flex佈局
flex-direction:row; 規定主軸方向：row/column
justify-content:space-around; 元素在主軸方向上的排列方式：flex-start/end/space-around/space-between
align-items:center; 元素在副軸方向上的排列方式
1.4 樣式
1.4.1 畫素
- px：畫素點
- rpx：畫素，針對不同的裝置自動適配，保證小程式前端相容性
- 規定裝置的最大寬度為750rpx；
1.5 獲取使用者資訊
1.5.1 資料繫結
- 針對於前端要顯示的變數資訊，我們可以藉助於使用{{變數名}}在前端wxml中作為佔位符·
- 在js中的data字典內定義“變數名：資料”
<image class='img' src="{{pic_head}}"></image>
<button class='bu'>{{name}}</button>
1.5.2 資料修改
- 對於資料要根據實時情況發生變化
- js中有一個this.setData()方法，引數是一個字典物件，用於對this中的data進行修改
data: {
name:"",
pic_head:"",
},
changeData:function(){
this.setData({name:"core",pic_head:"/images/test.png"})
},
1.5.3 點選獲取使用者資訊
1.5.3.1 首先在button元件上繫結點選事件
<button open-type='getUserInfo' bindgetuserinfo="getUser">點選獲取資訊 ></buttton>
bindtap方法是wxml中用於給元件繫結點選事件的方法，他的value是定義在js中的函式
1.5.3.2 然後在js中定義bindtap的value函式
// 獲取使用者資訊
getUser:function(){
console.log('sdf');
var that = this
//呼叫wx介面獲取當前使用者資訊
wx.getUserInfo({
success:function(res){
//呼叫成功時觸發
console.log(res.userInfo);
var userInfo =res.userInfo
that.setData({name:userInfo.nickName,pic_head:userInfo.avatarUrl})
},
fail:function(res){
//呼叫失敗時觸發
}
})
},
微信提供了一系列的介面，其中wx.getUserInfo()方法用於獲取當前使用者的資訊。、
這裡藉助除錯工具console.log()方法載入一下獲取到的結果res
-
console.log(res) 在控制檯上列印獲取到的使用者資訊json
-
根據控制檯輸出的json可以看到
-
{nickName: "core", gender: 1, language: "zh_CN", city: "Zhengzhou", province: "Henan", …} avatarUrl: "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKJlFEiaUkR0MzXbUGicOQOu3Wic1zRVj7nnicPSaA9Uu5fZnUCH6dGnk6ibibfZ9BX4ics6deallDOkjAMA/132" city: "Zhengzhou" country: "China" gender: 1 language: "zh_CN" nickName: "core" province: "Henan" __proto__: Object····· //這是userInfo
-
-
res中的userInfo中儲存了使用者資訊，userInfo中的nickName儲存使用者暱稱，avatarUrl儲存使用者頭像。
獲取到userInfo之後，使用js的this.setData方法來修改data從而改變wxml。
由於在當前wx.getUserInfo作用域內，this是指代當前的getUserInfo物件，而不是js檔案的this。所以我們需要在wx.getUserInfo呼叫之前宣告一個that變數，讓他指代js的this。
var that = this
然後在wx.getUserInfo.success中使用以下語句
that.setData({name:userInfo.nickName,pic_head:userInfo.avatarUrl})
1.6 獲取使用者位置資訊
這裡介紹一個新的wx介面：wx.chooseLocation()
具體用法：
-
可以將此功能加入1.5的“點選獲取資訊”的button中
-
<button class='bu' open-type="getUserInfo" bindgetuserinfo="getUser" bindtap='getLocalpath'>點選獲取資訊 ></button>-
在button控制元件中加入點選事件bindtap='getLocalpath'
-
然後在js中定義getLocalpath函式
-
// 獲取使用者位置 getLocalpath:function(){ var that = this console.log(wx.chooseLocation({ success: function(res) { that.setData({localpath:res.address}) }, })) },
-
-
-
-
關於位置資訊顯示的，參考之前的資料繫結與資料修改即可。這裡不再贅述。
1.7 for指令
1.7.1 列表物件迴圈展示
對後端傳來的資料進行迴圈展示
<view wx:for='{{dataList}}'>{{idx}}{{x}}</view>
這裡的wx:for是wxml提供的一個迴圈指令，它可以將其value中的物件依次遍歷
- 可類比於python的for迴圈
- for item in valueList:
- print(item)
- print(index(item))
- for item in valueList:
<view wx:for='{{dataList}}' wx:for-index="idx" wx:for-item="x">{{idx}}{{x}}</view>
這裡相對於上一條語句，使用wx：for-index=“idx”將index賦予別名idx
1.7.2 字典物件迴圈展示
<!-- 生成格式：key-value -->
<view wx:for="{{userInfo}}">{{index}}-{{item}}</view>
生成格式
key-value
1.8上傳圖片案例
圖片上傳案例
-
使用for指令迴圈展示圖片列表
-
<view bindtap="uploadImage">請上傳圖片</view> <view class='container'> <image wx:for="{{imageList}}" src="{{item}}"></image> </view>
-
-
用wx.chooseImage()方法API上傳圖片，並建立uploadImage函式
-
// 上傳圖片函式 uploadImage:function(){ var that = this wx.chooseImage({ count:9, sizeType:['original','compressed'], sourceType:['album','camera'], success: function(res) { // 覆蓋列表 // that.setData({imageList:res.tempFilePaths}); // 列表尾插 that.setData({ imageList:that.data.imageList.concat(res.tempFilePaths) }); }, }) }, -
上傳後會獲取到一個res
-
console.log(res)後會得到一個字典，字典中包含tempFilePaths陣列，包含已上傳的http地址
-
-
然後將res.tempFilePaths覆蓋或拼接到預設的圖片列表資料中去
-
覆蓋方式：
-
that.setData({imageList:res.tempFilePaths});
-
-
拼接方式
-
JavaScript中的列表concat方法，用於拼接兩個列表物件
-
that.setData({ imageList:that.data.imageList.concat(res.tempFilePaths) });
-
-
-
1.8.1 前端wxml頁面
<!--pages/publish/publish.wxml-->
<view bindtap="uploadImage">請上傳圖片</view>
<view class='container'>
<image wx:for="{{imageList}}" src="{{item}}"></image>
</view>
1.8.2 前端樣式wxss頁面
.container image{
width: 200rpx;
height: 200rpx;
padding:5rpx;
}
1.8.3 後端js邏輯頁面
// pages/publish/publish.js
Page({
/**
* 頁面的初始資料
*/
data: {
imageList: ["/images/test_head.jpg", "/images/test_head.jpg"]
},
// 上傳圖片函式
uploadImage:function(){
var that = this
wx.chooseImage({
count:9,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success: function(res) {
// 覆蓋列表
// that.setData({imageList:res.tempFilePaths});
// 列表尾插
that.setData({
imageList:that.data.imageList.concat(res.tempFilePaths)
});
},
})
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
},
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
},
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
}
})
1.8.4 json檔案
{
"usingComponents": {}
}