微信小程序进阶基础,微信小程序基本功能

摘要：

微信小程序高级基础微信小应用程序注册和服务器配置：什么是小程序？微信小程序实际上意味着微信已经提高了支持HTML5功能的能力，并开发了许多系统调用。在h5存在之前，有许多因素失去了其核心产品的大部分市场份额。h5面临着诸如不能一次开发和运行多次以及不同浏览器的兼容性等问题。因此，创建了与微信平台更兼容的微信小程序。

标题图

微信小程序高级基础

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

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

微信小程序其实是微信提高了自身对于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="http://t.zoukankan.com/{{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等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器,客户端发起一个HTTPSPOST请求,其中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 点赞

微信小程序高级基础

结语

相关文章

firefox临时文件位置及修改方法

websockify文档

7 天玩转 ASP.NET MVC — 第 1 天

ORA-01940:无法删除当前已链接的用户

JS反混淆——构造可知DeviceToken、nouce与token

百度专家谈智能硬件测试探索

最新文章

随机推荐

思享工具箱导航

JSON工具

格式化转换

加解密编码

文本数字

网络

站长

计算

其他

对照列表