微信小程序开发

环境搭建

1.1 Python环境

虚拟环境

django
drf

1.2 小程序环境

1.2.1 申请一个微信公众平台
1.2.2 AppID(小程序ID) ：
1.2.3 下载开发者工具

开发小程序

1.1 全局配置

● pages
● window
● tabBar

1.2 组件

<text>相当于<span>
<view>相当于<div>
image图片

flex布局

在容器中记住4种样式

display：flex;  // flex布局
flex-direction：row; // 规定主轴方向: row/column
justify-center：space-around; // 元素在主轴方向的排列方式：flex-start/flex-end/space-around/space-between
align-items：center; //元素在副轴方向的排列方式：flex-start/flex-end/center/space-around/space-between

跳转

1.1 对组件绑定点击事件

<view bindtop="clickMe" data-nid="123" data-name="qwe">点击跳转</view>

page({
  ...
  /**
  * 点击绑定事件
  **/
  clickMe: function(e) {
    var nid=e.currentTarget.dataset.nid;
    console.log(nid); // 123
  }
})

1.2 页面跳转

1.2.1 通过点击事件跳转 (只能跳转到非tabBar页面)

page({
  ...
  /**
  * 点击绑定事件
  **/
  clickMe: function(e) {
    var nid=e.currentTarget.dataset.nid;
    wx.navigateTo({ // 只能跳转到非tabBar页面
      url: '/pages/redirect/redirect?id='+nid
    })
  }
})

跳转到的页面接手参数，在onLoad方法中接收

page({
  ...
  /**
  * 生命周期函数--监听页面加载
  **/
  onLoad: function(options) {
    console.log(options) // {id: "123"}
  }
})

1.2.2 通过组件跳转 (只能跳转到非tabBar页面)

<navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator>

1.2.3 跳转tarbar内的页面

wx.switchTab({
  url: '../job/job',
})

数据绑定

<view>{{message}}</view>
<button bindtop="clickMe">点击</button>

/ **
  * 页面的初始数据
  **/
data: {
  message: "111";
},
clickMe: function () {
  // 获取数据
  console.log(this.data.message)
  // 修改数据（错误 只在js上做了修改 页面不生效）
  this.data.message = "333" ;
  // 修改数据
  this.setData({message: "222"})
}

获取用户信息

方法一：

<view> 当前用户名：{{name}}</view>
<view> 当前头像：<image src="{{path}}" style="height:200rpx;width:200rpx;"></image></view>
<view bindtap="getUserName"> 获取当前信息按钮</view>

getUserName: function(){
  var that = this;
  // 打开配置，手动授权
  wx.openSetting({})
  // 调用微信的接口，获取当前用户信息
  wx.getUserInfo({
    // 调用成功触发
    success: function (res) {
      that.setData({
        name: res.userInfo.nickName,
        path: res.userInfo.avatarUrl
      });
    },
    // 调用失败触发
    fail: function (res) {}
  })
}

方法二：
直接访问权限

<view> 当前用户名：{{name}}</view>
<view> 当前头像：<image src="{{path}}" style="height:200rpx;width:200rpx;"></image></view>
<button open-type="getUserInfo" bindgetuserinfo="XXXX">授权登录</button>

XXXX: function(){
  var that = this;
  // 调用微信的接口，获取当前用户信息
  wx.getUserInfo({
    // 调用成功触发
    success: function (res) {
      that.setData({
        name: res.userInfo.nickName,
        path: res.userInfo.avatarUrl
      });
    },
    // 调用失败触发
    fail: function (res) {}
  })
}

获取用户位置信息

<view bingtap="getLocalPath">{{localPath}}</view>

data: {
  localPath: "请选择位置"
}
getLocalPath: function(){
  vat that = this;
  wx.chooseLocaltion({
    sucess: function(res) {
      that.setData({localPath: res.address});
    }
  })
}

for 指令

<view wx:for="{{dataList}}"> {{index}} - {{item}}</view>
<view wx:for="{{dataList}}" wx:for-index="idx" wx:for-item="x"> {{idx}} - {{x}}</view>

data: {
  dataList:[]
}

获取图片

<view bindtap="uploadImage">请上传图片</view>
<view><image wx:for="{{imageList}}" src="{{item}}"></image></view>

data: {
  imageList: []
}
uploadImage: function() {
  var that = this;
  wx.chooseImage({
    count: 9,
    sizeType: ['original','compressed'],
    sourceType: ['album','camera'],
    sucess: function(res) {
      // 设置imageList，页面上图片自动修改。
      // that.setData({
      // 		imageList: res.tempFilePaths    
      // })
    
      // 默认图片+选择的图片
      that.setData({
      	imageList: that.data.imageList.concat(res.tempFilePaths)
      })
    } 
  })
}

注意：图片目前只是上传到了内存

双向绑定

<input value="{{phone}}" bindinput="bindPhone" placeholder="请输入手机号"></input>

data: {
  phone: ''
},
  bindPhone: function(e) {
    this.setData({phone: e.detail.value});
  }
网络请求API
wx.request({
  url: '',
  data: {},
  method: '', // POST\GET
  success: function(res) {
    console.log(res);
  }
})

在使用wx.request等有网络请求的API时，需要遵循：
● 网络地址https
● 后台必须设置要访问的域名