封亚飞---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": {}
}