微信小程序高级基础

作者: 魔王哪吒 | 来源:发表于2018-12-20 17:13 被阅读10次

标题图

微信小程序高级基础

微信小程序的注册和服务器配置:

小程序是什么呢?小程序是一种不需要下载安装就可以使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开应用,也体现了龙哥"用完即走"的理念,用户不用关心是否安装太多应用的问题,应用将无处不在,随时可用,而且又不用安装卸载。

微信小程序其实是微信提高了自身对于HTML5特性支持的能力，开发了很多的系统调用。之前h5的存在有很多因素失去了绝大部分的核心产品市场份额，h5面临着不能一次开发多次运行，还有不同浏览器的兼容性问题，所以才有了微信小程序，小程序更好的兼容了微信平台。

微信小程序：

重要:

app.js
app.json
app.wxss

// app.js
onLaunch:function(){
 // 当程序初始化的时候回执行onLaunch显示的内容
 }
 // 定义了一个全局的方法
 getUserInfo:function(){
 }
 // 全局的属性
 globalData: {
  userInfo: null
 }

// app.json
全局配置
// app.wxss
全局的样式

// pages
index.js
index.wxml
index.wxss

上传图片案例:

wx.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照

示例代码:

wx.chooseImage({
 count: 1, // 默认为9
 sizeType: ['original','compressed'], // 可以指定是原图还是压缩图,默认两者都有
 sourceType: ['album','camera'], // 可以指定来源是相册还是相机,默认两者都有
 success: function(res){
  // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
 var tempFilePaths = res.tempFilePaths
 }
})

// index.xml
<button bindtap="uploadImg">上传图片</button>
<image src="{{imgSrc}}"></image>

data:{
 imgSrc: ""
},
uploadImg: function(){
 var that = this;
 wx.chooseImage({
  count: 1, // 默认为9
  sizeType: ['original','compressed'], // 可以指定是原图还是压缩图,默认两者都有
  sourceType: ['album','camera'], // 可以指定来源是相册还是相机,默认两者都有
  success: function(res){
   // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
   var tempFilePaths = res.tempFilePaths
   that.setData({
     imgSrc: tempFilePaths[0]
   })
   console.log(tempFilePaths);
 }
 })
}

wx.previewImage(OBJECT)
预览图片

上传wx.uploadFile(OBJECT)

将本地资源上传到开发者服务器,如页面通过wx.chooseImage等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器,客户端发起一个HTTPS POST请求,其中content-type为multipart/form-data.

参数说明:

参数	类型	说明
`url`	`String`	开发者服务器`url`
`filePath`	`String`	要上传文件资源的路径
`name`	`String`	文件对应的`key`,开发者在服务器端通过这个`key`可以获取文件二进制内容
`header`	`Object`	`HTPP`请求`Header`, `header`中不能设置 `Referer`

加个name属性如表单,filePath为tempFilePaths,name对应的key要进行文件二进制的处理.

返回成功的参数:

success:
data: 开发者服务器返回的数据
statusCode:HTTP状态码

上传文件的示例代码:

wx.chooseImage({
 success.function(res){
  var tempFilePaths = res.tempFilePaths
  wx.uploadFile({
   url: "http://example.weixin.qq.com/upload",
   filePath: tempFilePaths[0],
   name: 'file',
   // 可以传其他的数据进去
   forData: {
    'user': 'test'
   },
   success: function(res){
    var data = res.data
   }
  })
 }
})

uploadImg: function(){
 var that = this;
 wx.chooseImage({
  count: 1, // 默认为9
  sizeType: ['original','compressed'], // 可以指定是原图还是压缩图,默认两者都有
  sourceType: ['album','camera'], // 可以指定来源是相册还是相机,默认两者都有
  success: function(res){
   // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
   var tempFilePaths = res.tempFilePaths
   // 上传图片
   wx.uploadFile({
    url:"",
    filePath: tempFilePaths[0],
    name: 'fileup',
    success: function(res){
     var data = res.data;
     console.log(data);
    },
   fail: function(){
    console.log("fail");
   }
   });
 }
 })
}

下载文件:

wx.downloadFile({
 url: "http://example.com/audio/123",
 success: function(res){

 }
})

登录api获取openid

wx.login(OBJECT)

调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid)以及本次登录的会话密钥(session_key),用户数据的加解密通讯需要依赖会话密钥完成.

success 成功
fail 失败
complete 结束

用户信息

wx.getUserInfo(OBJECT)

获取用户信息,需要调用wx.login接口.

wx.getUserInfo({
 success: function(res){
  var userInfo = res.userInfo
  var nickName = userInfo.nickName
  var gender = userInfo.gender
  var province = userInfo.province
  var city = userInfo.city
  var country = userInfo.country
 }
})

登录

wx.login
// success
errMsg:调用结果
code: 用户允许登录后,回调内容会带上code,有效五分钟,开发者需要将code发送到开发者服务器后台,使用code换取session_key api,将code换为openid和session_key

// app.js
App({
 onLaunch: function(){
  wx.login({
   success: function(res){
    if(res.code){
     // 发起网络请求
    wx.request({
     url: "",
     data: {
      code: res.code
     }
    })
    }else{
     console.log("获取用户登录失败"+res.errMsg);
    }
   }
  })
 }
})

利用code换取session_key

这是一个HTTPS接口,开发者服务器使用登录凭证code获取session_key和openid,其中session_key是对用户数据进行加密签名的密钥,为了安全,session_key不应用在网络上传输.

接口地址:

效果

请求参数:

参数	说明
`appid`	小程序唯一标识
`secret`	小程序的`appsecret`
`js_code`	登录时获取的`code`
`grant_type`	值为`authorization_code`

参数	说明
`openid`	用户的唯一标识
`session_key`	会话密钥

// index.wxml
<button bindtap="login">登录</button>

login: function(){
 wx.login({
  success:function(res){
   console.log(res.code);
   wx.request({
    url: "",
    data: {
     code: res.code
    },
    success: function(res){
     console.log(res);
    }
   })
  }
 });
}
// code secret js_code api

效果

发送请求:(示例代码)

wx.request({
 url: "test.php",
 data: {
  x: '',
  y: '',
  },
  header: {
   'content-type': 'application/json'
  },
  success: function(res){
   console.log(res.data)
  }
})

客服会话

contact-button

客服会话按钮,用于页面上显示一个客服会话按钮,用户点击按钮后进入客服会话.

属性名	类型	说明
`size`	`Number`	会话按钮的大小,有效18-27,单位:`px`
`type`	`String`	会话按钮的样式类型,有效值为`default-dark`,`default-light`
`session-from`	`String`	用户从该按钮进入会话,开发者将收到带上本参数的事件推送,本参数可以用于区分用户进入客服会话的来源

<contact-button type="default-light" size="20" session-from="weapp"></contact-button>

客服会话:

// index.wxml
<contact-button type="default-light" size="20" session-from="weapp"></contact-button>

效果

小程序后台消息推送:

效果

模板消息

form
表单,将组件内的用户输入的<switch/><input/><checkbox/><slider/><radio/><picker/>提交
当点击<form/>表单中formType为submit的<button/>组件时,会将表单组件中的value值进行提交,需要在表单组件中加上name来作为key.

属性名	类型	说明
`report-submit`	`Boolean`	是否返回`formId`用于发送模板消息
`bindsubmit`	`EventHandle`	`event.detail={}`
`bindreset`	`EventHandle`	表单重置

小程序后台模板消息,模板库

效果

// index.js
const app = getApp()
// 填写微信小程序appid
var appid = '';
// 填写微信小程序secret  
var secret = '';
Page({
  // 页面数据
  data: {
    access_token: '',
    openid: '',
  },

  // 表单请求
  formRequst: function (e) {
    var that = this;
    // 登录
    wx.login({
      success: res => {
        // 调用接口获取登录凭证（code）
        console.log("获取code 成功", res.code);
        var code = res.code;
        // 获取openId
        wx.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&grant_type=authorization_code&js_code=' + code,
          header: {
            'content-type': 'application/json' //默认值
          },
          success: function (res) {
            console.log("获取openid 成功", res.data.openid);
            var openid = res.data.openid;
            that.setData({
              openid: openid
            })
            // wx.setStorageSync("openid", openid)

            // 获取 access_token
            wx.request({
              url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appid + '&secret=' + secret,
              method: 'GET',
              header: {
                'content-type': 'application/json' //默认值
              },
              // 成功
              success: function (res) {
                console.log("获取小程序 access_token 成功", res.data.access_token);
                that.setData({
                  access_token: res.data.access_token
                })

                // 上上一步
              },
              // 失败
              fail: function (err) {
                console.log("获取小程序 access_token 失败", err);
              }
            })

            // 上一步
          },
          fail: function (err) {
            console.log("获取openid 失败", err);
          }
        })
      }
    })
  },
  // 提交表单
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value);
    console.log('form发生了submit事件，携带数据为：', e.detail.formId);


    var that = this;
    // 发送模板消息
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + that.data.access_token,
      data: {
        // openid
        "touser": wx.getStorageSync("openid"),
        // 模板消息的id
        "template_id": "",
        // "form_id": "FORMID",
        "form_id": e.detail.formId,
        data: {
          "keyword1": {
            "value": "2018.10.10"
          },
          "keyword2": {
            "value": "小红"
          }
        },
        "emphasis_keyword": "keyword1.DATA"
      },
      method: 'POST',
      // 成功
      success: function (res) {
        var data = res.data;
        console.log("sendTemplateMessage 成功", data);
        wx.showToast({
          title: '发送成功',
          icon: 'success'
        })
      },
      // 失败
      fail: function (err) {
        console.log("sendTemplateMessage 失败", err);
      }
    })
  },



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

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.formRequst();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

WebSocket(双向的)

wx.connetSocket(OBJECT)

创建一个WebSocket连接,一个微笑小程序同时只能有一个WebSocket连接,如果当前已存在一个WebSocket连接,会自动关闭该连接,并重新创建一个WebSocket连接.

onLoad: function(){
 wx.connectSocket({
  url: api,
  data: {},
  header: {
   'content-type': 'application/json'
  },
  method: 'GET',
  success: function(){
   console.log("客户端连接成功");
  }
 })
}

wx.sendSocketMessage(OBJECT)

通过WebSocket连接发送数据,需要先wx.connectSocket,并在wx.onSocketOpen回调之后才能发送.

wx.onSocketOpen

监听WebSocket连接打开事件

wx.connectSocket({

})
wx.onSocketOpen(function(res){
})

微信支付

效果

小程序后台微信支付申请

效果

小程序api微信支付

wx.requestPayment
发起微信支付

效果

// index.wxml
<button bindtap="wxpay">发起支付</button>

appId,nonceStr,package,paySign,signType,timeStamp.

效果

发起支付的请求:

wx.requestPayment({
 'timeStamp': '',
 'nonceStr': '',
 'pachage': '',
 'signType': 'MD5',
 'paySign': '',
 success:function(res){}
})

达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客：达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注
小礼物走一走 or 点赞

微信小程序高级基础

结语

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

微信小程序🔥

微信小程序

程序猿开发笔记

程序媛开发笔记

达叔的朋友圈们

Web前端

程序员

程序员