微信小程序入门 --- 传值及获取值方法 --- 二维码制作

微信小程序开发入门

免安装、操作更接近原生APP、 必须在微信中使用
小程序宣传方式：小程序搜索入口，附近小程序，扫一扫、长按识别小程序码，好友分享、群分享，关联公众号，第三方的小程序应用商店，小程序之间互相跳转
在线文档：http://mp.weixin.qq.com/debug/wxadoc/dev/
小程序开发流程：注册小程序》代码开发》提审》上线
如何注册小程序：公众号注册、微信小程序官网注册   http://mp.weixin.qq.com/

微信小程序没有BOM和DOM概念，所以不能使用window对象和document对象。

wx:if 与 hidden 区别：

  wx:if  是否渲染，  hidden   是否隐藏。

一般来说，`wx:if` 有更高的切换消耗而 `hidden` 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好。

事件：

 

什么是事件？

事件是视图层到逻辑层的通讯方式。   事件可以将用户的行为反馈到逻辑层进行处理。   事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。   事件对象可以携带额外信息，如 id, dataset, touches。

事件对象可以获取额外信息，如 id, dataset(自定义属性集合), touches(触摸点坐标)。

事件绑定和冒泡

1. 冒泡事件    bind事件类型        如     `bindtap`   `bindlongpress`
2. 非冒泡事件    catch事件类型    如  `catchtap`   ` catchlongpress`

事件传参注意：小程序绑定事件只能写函数名称，不能通过括号方式传参。  

bindtap="tapHandle(520)"                  data-index="520" bindtap="tapHandle"   

tapHandle: function(event) {
     console.log( event.target.dataset.index );  // 输出标签自定义属性上的index值
  }     

WXS  脚本

WXS（WeiXin Script）是小程序的一套脚本语言，功能类似`<script>`标签，用于在视图层定义函数(比较少用)。

注意

1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
3. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
4. wxs 函数不能作为组件的事件回调。
5. 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

<wxs module="foo">
var sum = function(a,b){
  return a+b;
};     // 这里可以导出一个对象，这个对象可以直接在界面上使用 
module.exports.sum = sum;
</wxs>

<view> {{foo.sum}} </view>

微信小程序传值以及获取值方法，传值有两种方法，对应也有获取值得方法，
1、设置id的方法标识跳转后传递的参数值；
2、通过使用data - xxxx 的方法来标识要传递的值
微信小程序设置id的方法标识来传值
在要跳转的item处，设置一个id并给当前的id赋值上对应的key值。

<view wx:for = "{{infoList}}"  wx:for-item = "value"  wx:for-index = "{{index}}">

<view  bindtap = "infoDetail"  id = "{{key}}" >

然后在js的bindtap的响应事件中获取，并传递到下一个界面中；

获取到id传的值
通过e.currentTarget.id;获取设置的id值，并通过设置全局对象的方式来传递数值，
获取全局对象 var app=getApp(); //设置全局的请求访问传递的参数 app.requestDetailid=id;

infoDetail(e){

var id = e.currentTarget.id;   //获取当前item的下标id  通过currentTarget.id ；

//获取全局对象

var app = getAPP();

app.requestDetailid = id;    //设置全局的请求访问传递的参数

}

通过使用data - xxxx 的方法标识来传值
通过使用data - xxxx 的方法标识来传值，xxxx可以自定义取名 比如data-key等等都可以。

<view  bindtap = "infoDetail"  data-id = "{{value.id}}" >

如何获取data-xxxx传递的值？
在js的bindtap的响应事件中：
通过数据解析一层层找到数据，var id=e.target.dataset.id(根据你的data-id的取名)

console.log(e)

控制台查看：   target -> dataset    里面可以查看到设置的值 

微信小程序如何跨页面获取值？
依据上面的方式设置要传递的值，页面跳转后，我们就需要在下一个页面拿到传递的数据（这个数据在传递前，就已经被设置成全局变量）
在跳转后的js页面，接收传递过来的数据detail.js
同样通过全局的方式取值出来，（即和app.js中取某个变量的值是一样的）
var infoid=getApp().infoDetailid;
console.log(infoid);

onload:function (options) {

var infoid = getApp().infoDetailid;

console.log(infoid);

}
到此为止，我们数值传递并接收成功，后面就可以根据我们接收的参数，进行进一步的操作了。

二维码制作：

canvas     画布。该组件是原生组件，使用时请注意相关限制。

属性名	类型	默认值	说明
canvas-id	String		canvas 组件的唯一标识符
disable-scroll	Boolean	false	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart	EventHandle		手指触摸动作开始
bindtouchmove	EventHandle		手指触摸后移动
bindtouchend	EventHandle		手指触摸动作结束
bindtouchcancel	EventHandle		手指触摸动作被打断，如来电提醒，弹窗
bindlongtap	EventHandle		手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}

注：canvas 标签默认宽度300px、高度225px；    同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作

示例代码：

// canvas.js
Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('firstCanvas')
    
    context.setStrokeStyle("#00ff00")
    context.setLineWidth(5)
    context.rect(0, 0, 200, 200)
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    context.moveTo(160, 100)
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
    context.draw()
  }
})

相关api：wx.createCanvasContext

<!--wxml-->
<view class="container">
    <view class='img-box'>
        <canvas style='width:680rpx;height:680rpx;background-color:#f1f1f1' canvas-id='mycanvas'></canvas>
    </view>
    <form bindtap='formSubmit'>
        <view class='input-row'>
            <label>网址</label>
            <input type='text' name='url' maxlength='255' placeholder='{{placeholder}}'></input>
        </view>
        <button form-type='submit' class='mybtn' type='primary'>生成二维码</button>
    </form>
</view>

//js

let QR = require('../../utils/qrcode.js')
Page({
    data: {
        placeholder: 'http://www.taobao.com'
    },
    onLoad: function() {
        let size = this.setCanvasSize()
        let url = this.data.placeholder
        this.createQRcode(url, 'mycanvas', size.w, size.h)
    },
    createQRcode(url, canvasId, canvasWidth, canvasHeight) {
        QR.qrApi.draw(url, canvasId, canvasWidth, canvasHeight)
    },
    setCanvasSize() {
        let size = {} //存储尺寸
        let res = wx.getSystemInfoSync() //获取设备的信息
        console.log(res)
        let scale = 680 / 750  
        let width = res.windowWidth * scale
        let height = width
        size.w = width
        size.h = height
        return size
    },
    formSubmit(e) {
        let url = e.detail.value.url || this.data.placeholder
        wx.showToast({
            title: '生成中',
            icon: 'loading',
            duration: 1000
        })
        let _this = this
        let timer = setTimeout(
            () => {
                let size = _this.setCanvasSize()
                let url = _this.data.placeholder
                _this.createQRcode(url, 'mycanvas', size.w, size.h)
                wx.hideToast()
                clearTimeout(timer)
            }, 1000)
    }
})