微信小程序使用汇总

1.微信小程序UI框架：

   目前还没有找到很完美的UI框架，所以基本上还是采用自己手写，基础的布局可以借用weui;

2.获取登录用户微信头像

<open-data type="userAvatarUrl"></open-data>

3.页面跳转(两种方式)

  第一种：通过<navigator url="" open-type="navigate" ></navigator >标签跳转，就是<a>标签，

  第二种：通过点击事件实现跳转，带参数可以通过data-name方式；

<view  bindtap='ToCoalMineDetail'  data-id="{{item.corp_id}}" ></view>

ToCoalMineDetail: function(e) {

   let id = e.currentTarget.dataset.id;

   wx.navigateTo({

      url: '/pages/CoalMineFile/CoalMineDetail/CoalMineDetail?UUID=' + id,

   })

},

  两种方式的参数接收方式均可以通过onload函数的option获取到；

  onLoad: function(options) {
    this.setData({
      id: options.UUID
    })
  }

4.ajax请求封装调用（这个不是最好的方式，只是自己目前学习完成项目使用的，以后会持续更改）

在utils文件夹新建request.js

var app = getApp();
//这里因为我是本地调试，所以host不规范，实际上应该是你备案的域名信息
var host = 'http://192.168.6.251:9000/';

/**
 * POST请求，
 * URL：接口
 * postData：参数，json类型
 * doSuccess：成功的回调函数
 * doFail：失败的回调函数
 */
function request(url, postData, method, contentType, doSuccess, doFail) {
  var token;
  wx.getStorage({
    key: 'token',
    success(res) {
      token = res.data;
      wx.request({
        //项目的真正接口，通过字符串拼接方式实现
        url: host + url,
        header: {
          'content-type': contentType,
          'Authorization': 'Bearer ' + token
        },
        data: postData,
        method: method,
        success: function (res) {
          //参数值为res.data,直接将返回的数据传入
          doSuccess(res.data);
        },
        fail: function () {
          doFail();
        },
      })
    },
    fail: function (error) {
      console.log(error)
      console.log('shibai')
    }
  })
}

/**
 * module.exports用来导出代码
 * js文件中通过var call = require("../util/request.js")  加载
 * 在引入引入文件的时候"  "里面的内容通过../../../这种类型，小程序的编译器会自动提示，因为你可能
 * 项目目录不止一级，不同的js文件对应的工具类的位置不一样
 */
module.exports.request = request;

在需要的页面引入js,传值调用即可

var call = require("../../../utils/request.js")

call.request('dcmMineInfoRecord/mineInfoRecordDetail', {mineId: this.data.id}, "GET", 'application/x-www-form-urlencoded', this.success_MineDetail, this.fail_MineDetail);

5.公共方法封装调用

项目中经常会用到时间戳处理、数字保留位数处理等，这是需要封装公共函数调用；

新建filter.wxs文件，以下为处理数字保留两位小数的公共函数封装

var filters = {
  toFix: function (value) {
    if (typeof (value) == 'string') {
      return parseFloat(value).toFixed(2)
    } else {
      return value.toFixed(2) // 此处2为保留两位小数，保留几位小数，这里写几    
    }
  },
}

module.exports = {
  toFix: filters.toFix,
}

 页面调用：

<wxs module="filters" src="../../../utils/filters/filter.wxs"></wxs>

<div class="weui-cell__ft">{{filters.sub(detail_data.establishOrgDate)}}</div>

6.公共参数

整个项目有些参数是公共的，不需要在每个页面都声明获取，只需要在app.js中定义公共的就可以；

  globalData: {
    commonUrl: 'http://119.3.246.232:8088'
  }

var app = getApp();
console.log(app.globalData.commonUrl)

7.变量赋值

data: {
  typeInputFlag: false,
  addOption: {
     establishOrgTime: ''
}},

let _startTime= 'addOption.establishOrgTime'
this.setData({
   typeInputFlag:true,
   [_startTime]: e.detail.value
})

8.生成某一页面二维码

index.wxml

<view style='background:#f2f2f2;width:100%;height:100vh;overflow:hidden;' class='img_module'>
	<view class='img'>
		<image src='{{src2}}' style='width:500rpx;height:500rpx'></image>
	</view>
	<button bindtap="savePic">保存二维码</button>
	<button class='weixin' open-type="share">
		<view class='sentFriend'>发送给好友</view>
	</button>
</view>

index.js

Page({
  data: {
    src2: '',
    token: '',
    userInfo: {}, //用户信息
  },

  savePic: function() {
    var that = this;
    var aa = wx.getFileSystemManager();
    aa.writeFile({
      filePath: wx.env.USER_DATA_PATH + '/test.png',
      data: that.data.src2.slice(22),
      encoding: 'base64',
      success: res => {
        wx.saveImageToPhotosAlbum({
          filePath: wx.env.USER_DATA_PATH + '/test.png',
          success: function(res) {
            wx.showToast({
              title: '保存成功',
            })
          },
          fail: function(err) {
            console.log(err)
          }
        })
        console.log(res)
      },
      fail: err => {
        console.log(err)
      }
    })

  },
  getToken: function() {
    var that = this;
    // 生成页面的二维码
    wx.request({
      //注意：下面的access_token值可以不可以直接复制使用，需要自己请求获取
      url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxca56af29182b8468&secret=e7675c2b4cec325b97a7d3b3611c7f2d',
      data: {},
      method: "GET",
      success(res) {
        console.log('成功')
        console.log(res)
        that.setData({
          token: res.data.access_token
        })
        that.getErweima()
      },
      fail(e) {
        console.log('失败')
        console.log(e)
      }
    })
  },
  getErweima: function() {
    var that = this;
    // var scene = decodeURIComponent(options.scene)
    // 生成页面的二维码
    wx.request({
      url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + this.data.token,
      data: {
        scene: '000',
        page: "packageA/pages/CoalBrain/CoalBrainList" //这里按照需求设置值和参数   
      },
      method: "POST",
      responseType: 'arraybuffer', //设置响应类型
      success(res) {
        console.log('生成图片成功')
        console.log(res)
        let base64 = wx.arrayBufferToBase64(res.data);
        that.setData({
          src2: 'data:image/jpg;base64,' + base64
        })
        console.log(that.data.src2)
      },
      fail(e) {
        console.log('生成图片失败')
        console.log(e)
      }
    })

  },
  onLoad: function(options) {
    var that = this;
    that.getToken();
  }
})