微信小程序

微信小程序-Sublime Text3插件

  1. 修改文件类型

    wxml设置文件类型为html

    wxss设置文件类型为css

    js设置文件类型为javascript

    json设置文件类型为json

  2. 安装插件

下载地址: https://github.com/Abbotton/weapp-snippet-for-sublime-text-2-3

解压之后把这个 weappSnippet 文件夹放到sublime text安装文件Packages/User 下,重启!

在app.js中给全局变量赋值(更改全局变量的值)

var that = this

that.globalData.userInfo="你得到的值";

// 在其他js中给全局变量赋值
//获取应用实例
var app = getApp()
app.globalData.getUserInfoFail="你的值";

调用全局函数和函数的复用

在app.js的App({})中定义的数据函数都是全局的

在js页面中可以通过

var app = getApp();

app.function/key的方式调用

不过我们没有必要再app.js中定义全局函数,微信已经帮我们定义了一个模块化的思想

文档:

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html

eg:

//util.js
/**
 * 处理业务逻辑
 */
function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

// 获取用户所在地址
function getLocation(){

  return "我在人民广场吃炸鸡!"
}

/**
 * 模块化导出暴露接口
 */
module.exports = {
  formatTime: formatTime,
  getLocation: getLocation
}

//index.js
// 引入
var utils = require("../../utils/util.js")

Page({
  data: {
	// ...,
    location:"你在哪里呦!!",
  },


  // 获取地址
  modal:function(){
    var that = this

    wx.showModal({
     title: "提示",
     content: "确定后会更改location",

     success: function(res) {
      if (res.confirm) {
        that.setData({
          // 这样获取值
          location: utils.getLocation(),
        })
      }
     },

     fail: function(res){
      console.log("你家弹窗呢?");
     }

    })
  },
})

1. 获取openid

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

  wx.login({
    //获取code
    success: function(res) {
       code = res.code //返回code
    }
  })

1.2 获取openid 拿到上一步获取的code,结合小程序 appid 和 secret 请求接口https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code 换取openid,与 openid 一同被返回的,还包括 session_key,其中 session_key 是对用户数据进行加密签名的密钥。为了自身应用安全,session_key 不应该在网络上传输。

  wx.request({
    url: 'https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code='+ code +'&grant_type=authorization_code',
    data: {},
    header: {
        'content-type': 'application/json'
    },
    success: function(res) {
      openid = res.data.openid //返回openid
    }
  })

2. 获取用户信息

  2.1 app.js中创建该全局方法
  //app.js
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.personInfo){
      typeof cb == "function" && cb(this.globalData.personInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.personInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.personInfo)
            }
          })
        }
      })
    }
  }

2.2 实例化全局方法获取用户信息

  var that = this;
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function (personInfo) {
    //更新数据
    that.setData({
      personInfo: personInfo
    })
  })

居中显示

view{
  display: flex;
  justify-content: center;
  align-items: center;
}

//ps:view自己要占有一定的体积



导航