小程序前端
封亞飛—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: "//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": {}
}
