微信小程序

 

1.微信小程序制作

• 什么是微信小程序？

  在手机微信自己的平台就可以运行的程序，不需要再下载新的软件，存现在与本身应用里的小应用，类似于微信，qq都有小程序

• 为什么要做小程序？

  微信用户基数大。
  在微信上用我们小程序会比较便捷。

• 如何开发小程序？

  利用微信开发者工具，加上django框架和drf框架来完成

• 掌握的技能

  小程序：学习微信开发的语言（前端html、css、js、vue.js）
  微信开发者工具
  pycharm
  API：restful接口（Python+django+drf框架）。

2.环境的搭建

2.1 Python环境

• 虚拟环境

  • django

  • drf

• pycharm

2.2 小程序环境

• 2.2.1 申请一个微信公众平台

• 2.2.2 保存自己的appid

appid = wxda080f8685b53eed

• 2.2.3 下载开发者工具

• 2.2.4 创建项目

3.开发小程序

3.1 全局配置

页

3.2配置介绍

app.js: 小程序初始化js；
app.json: 小程序配置文件，如：导航，窗口，各页面引入；
app.wxss: 小程序公共样式;
各个页面：
Pages：各个子页面以js+json+wxml+wxss组成，方便管理，右边可快捷生成page;
小程序遵循MVC结构（Model View Controller）,js为页面逻辑（C&M）,wxss为页面样式，修饰wxml的DOM元素，wxml为页面机构（V），json为页面配置（具体API可见微信官方文档，可以修改此页面标题等，也充当了部分M）；

3.3 组件

• 3.2.1 text：编写文本信息，类似于span标签

• 3.2.2 view：容器，类似于div标签

• 3.2.3 image：图片

{
  "pages": [
    "pages/index/index",
    "pages/home/home"
  ],
  //相当于导航栏，视图文件必须在这里面有配置
  "window": {
    "navigationBarBackgroundColor": "#FFDAB9",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "李业"
  },
  //小程序最上面的window窗口，固定的属性
  "tabBar": {
    "selectedColor":"#CD5C5C",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "static/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
      }
    ]
  }
}
//小程序最下面的导航页，最多可以分成9

4.flex布局

一种非常方便的布局方式。

在容器中记住4个样式即可。

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

5. 跳转

5.1 对标签绑定点击事件

点我跳转
//绑定事件名称clisck数据由data-nid，data-name传递参数
Page({
  ...
  /**
   *  点击绑定的事件
  */
  clickMe:function(e){
    var nid = e.currentTarget.dataset.nid;
    console.log(nid);
  }
})

5.2 页面跳转

wx.navigateTo({
    url: '/pages/redirect/redirect?id='+nid
})
跳转到的页面如果想要接受参数，可以在onLoad方法中接受。

redirect.js

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

5.3 通过标签跳转

跳转到新页面

6.数据绑定

    ...
    
    

    
    
    

vue.js


    

        
{{message}}
    
​
    
    

6.1 基本显示

• wxml

  数据1：{{message}}

• 展示数据

  // pages/bind/bind.js
  Page({
  ​
    /**
     * 页面的初始数据
     */
    data: {
      message:"沙雕李业",
    }
  )}

6.2 数据更新

• wxml

  数据2：{{message}}
  ​
  点击修改数据

• 修改数据

  Page({
    data: {
      message:"沙雕李业",
    },
    changeData:function(){
      // 修改数据
      this.setData({ message: "大沙雕李业"});
    }
  })

7.获取用户信息

方式一

• wxml

  获取当前用户名

• js

    getUserName:function(){
      // 调用微信提供的接口获取用户信息
      wx.getUserInfo({
        success: function (res) {
          // 调用成功后触发
          console.log('success',res)
        },
        fail:function(res){
          // 调用失败后触发
          console.log('fail', res)
        }
      })
    },

方式二

• wxml

  授权登录

• js

   xxxx:function(){
      wx.getUserInfo({
        success: function (res) {
          // 调用成功后触发
          console.log('success', res)
        },
        fail: function (res) {
          // 调用失败后触发
          console.log('fail', res)
        }
      })
    }

示例

• wxml

  
  当前用户名：{{name}}
  
  当前头像：
    
  获取信息button
  ​

• js

  // pages/login/login.js
  Page({
  ​
    /**
     * 页面的初始数据
     */
    data: {
        name:"",
        path: "/static/default.png"
    },
    fetchInfo:function(){
      var that = this;
      wx.getUserInfo({
        success:function(res){
          console.log(res);
          that.setData({
            name:res.userInfo.nickName,
            path:res.userInfo.avatarUrl
          })
        }
      })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
  ​
    },
  ​
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
  ​
    },
  ​
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
  ​
    },
  ​
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
  ​
    },
  ​
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
  ​
    },
  ​
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
  ​
    },
  ​
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
  ​
    },
  ​
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
  ​
    }
  })

  注意事项：

  • 想要获取用户信息，必须经过用户授权（button）。

  • 已授权

  • 不授权，通过调用wx.openSetting

    // 打开配置，手动授权。
    // wx.openSetting({})

8.获取用户位置信息

• wxml

  {{localPath}}
  小程序获取位置信息需要在app.json中配置permission属性

• js

    data: {
        localPath:"请选择位置",
    },
    getLocalPath:function(){
      var that = this;//因为this指代的是该父级函数的内容，但是自行创建的没有这个说法，就使用that传递一下
      wx.chooseLocation({
        success: function(res) {
          that.setData({localPath:res.address});
        },
      })
    },

8.获取图片

• wxml

  
  请上传图片
  
    
  
  ​

• js

    data: {
      imageList: ["/static/hg.jpg", "/static/hg.jpg"]
    },
  ​
    uploadImage:function(){
      var that = this;
  ​
      wx.chooseImage({
        count:9,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success:function(res){
          // 设置imageList，页面上图片自动修改。
          // that.setData({
          //   imageList: res.tempFilePaths
          // });
  ​
          // 默认图片 + 选择的图片； 
          that.setData({
            imageList: that.data.imageList.concat(res.tempFilePaths)//concat将两个列表相加得到一个新的列表
          });
        }
      });
    },

总结

• 标签（组件）

  • text

  • view

  • image

  • navigator，跳转到其他页面（默认只能跳转到非tabbar页面）

  • button，按钮（特殊：建议获取用户信息时）

• 事件

  • bindtap

    
    ​
    

    func:function(e){
        e.currentTarget.dataset
    }

• api

  • navigateTo

    wx.navigateTo({
        url: '/pages/redirect/redirect?id='+nid,
    })

  • openSetting

    wx.openSetting({})

  • getUserInfo

     wx.getUserInfo({
          success:function(res){
            console.log(res);
          }
        })
    ​
    注意：结合button按钮实现

  • chooseLocation

    wx.chooseLocation({
          success: function(res) {
            
          },
        })

  • chooseImage

    wx.chooseImage({
          count:9,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success:function(res){
            
          }
        });

• 数据绑定

• for指令：

  • wxml

    
    商品列表
    
      {{index}} -  {{item}}
      {{idx}} -  {{x}}
    
    
      {{userInfo.name}}
      {{userInfo.age}}
    
    
      {{index}} - {{item}}
    
    ​

  • js

      data: {
        dataList:["白浩为","海狗","常鑫"],
        userInfo:{
          name:"alex",
          age:18
        }
      },

• 注意：setData + that

  //绑定函数
  bindTxt:function (e) 
      {
          this.setData({massage:e.detail.value});
      },
      bindphone:function (e) 
      {
          this.setData({phonege:e.detail.value});
     
      },
      bindcode:function (e) 
      {
          this.setData({code:e.detail.value});
     
      },