微信小程序学习

此html用于CLY的知识总结

（一）微信开放文档

https://developers.weixin.qq.com/miniprogram/dev/framework/

（二）wx小程序基础函数

2.1 页面加载函数

2.1.1 onLoad:function(){}

第一次打开页面的时候会调用，第二次就不会调用了
onLoad() 应该在第一次显示页面的时候调用，以后再次切换到该页面时，不会再调用这个函数

2.1.2 onShow 页面显示

页面显示，每次打开页面都会调用一次。

2.1.3 onReady 页面初次渲染完成

一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期

2.1.4 页面加载函数的区分

• onLoad(Object query) 页面加载时触发。一个页面只会调用一次，可以在 onLoad的参数中获取打开当前页面路径中的参数。
• onShow() 页面显示/切入前台时触发。
• onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

所以加载顺序是先加载onLoad，再是onShow，最后onReady

2.1.5 onHide: 页面隐藏

当navigateTo或底部tab切换时调用。

2.1.6 onUnload: 页面卸载

当redirectTo或navigateBack的时候调用

2.2 wx.request 向后台请求数据

wx.request({
      url: myUrl+'/ServletAction?action=get_device_record',
      data:{  //向后台传输的数据
      id:myId;
      name:myName;
		},
      header:{"content-type":"applicaiton/x-www-form-urlencoded","x-requested-with":"XMLHttpRequest"},
      success(res){ //res是返回的结果，res.data是结果中的数据
        that.setData({ //前面要设置that=this; 原因见this详解
     	 todoList:res.data.aaData,
    })
      },
      fail(res){
        console.log(fail);
      }
    })

2.2.3 res返回数据详解

我们打印一个普通后台返回的res数据：

• console.log(res); 结果如下：
  
  原因：后台返回的是JSON格式的数据，需要用JSON.stringify(res)解析；

• console.log(JSON.stringify(res)); 结果如下：
  

• 打印res.data：console.log(res.data)；
  

2.2.4 onLoad方法中的options传值

• 这里的例子是一个List<Device> 是比较复杂情况
  小程序页面加载的时候，可以通过options获取到上一个页面标签的属性以及属性值。
  在查询页面中放入：
• 要使用字符串
  转化成string格式的方法： JSON.stringify
• 使用wx.navigateTo

 var record=JSON.stringify({"id":id,"device_name":deviceName,"device_id":deviceId})
  wx.navigateTo({
    url: "../modify/modify?record=" + record,
  })

在修改页面中获得属性值：
注意！要将options.record用JSON.parse()转化成JSON数据格式

  onLoad: function (options) {
    console.log(options.record);
    var record=JSON.parse(options.record);
    this.setData({
      id:record.id,
      deviceName:record.device_name,
      deviceId:record.device_id,
    });
  },

2.2.5 page的data在各个函数中的更新

每个js页面都有全局data：

Page({
  data: {
    todoList:[],
    deviceId:'',
    deviceName:'',
    id:'',
  },
)}

在自己定义的函数中想要更新data数据。必须调用this.setData来完成数据的更新：

 this.setData({
      id:record.id,
      deviceName:record.device_name,
      deviceId:record.device_id,
    });

this.setData({
todoList:res.data.aaData,
})

2.3 wx.uploadFile 上传图片

2.3.1 代码示例

wx.uploadFile({
          filePath: res.tempFilePath[0],
          name: 'img',
          url: myUrl+'/ServletAction?action=upload_record',
          header:{"content-type":"applicaiton/x-www-form-urlencoded","x-requested-with":"XMLHttpRequest"},
          success(res){
            //后端存储图片后 返回attachment_id
            console.log(JSON.parse(res.data));
            _this.data.uploadAttachmentId.push(data.attachment_id);
            console.log(_this.data.uploadAttachmentId); //将attachmeng_id存入全局变量
          },
          fail(res){
            console.log(JSON.stringify(res));
          }
        })

• uploadfile 返回的数据格式

 success(res){
         //在这个地方 uploadfile返回的数据不是JSON格式的，需要用JSON.parse(res.data)转换格式
            console.log(JSON.parse(res.data));
            _this.data.uploadAttachmentId.push(data.attachment_id);
            console.log(_this.data.uploadAttachmentId); //将attachmeng_id存入全局变量
          },

2.3.1

（三）微信小程序中的event事件

3.1 什么是事件？

参考链接：https://www.cnblogs.com/nosqlcoco/p/5954453.html

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

3.2 事件分类

• touchstart 手指触摸
• touchmove 手指触摸后移动
• touchcancel 手指触摸动作被打断，如弹窗和来电提醒
• touchend 手指触摸动作结束
• tap 手指触摸后离开
• longtap 手指触摸后后，超过350ms离开
  …
  [剩余部分请参考原链接，作者暂不允许转载]

3.3 详细例子

在”请点击我“文本上创建一个点击事件【bindtap=“send_mes”】
绑定data-id=“2”

<text bindtap="send_mes" data-id="2">请点击我</text>

新建一个函数send_mes,并给这个函数传递一个参数event，同时将event这个对象在控制台打印出来，代码如下：

send_mes:function(event){ //也可以写成：send_mes:function(e)

var myId=event.currentTarget.dataset.id;

console.log(event);
console.log(JSON.stringify(event)); //这两个好像有区别 我忘记尝试了
console.log(myId); //这里会输出  2

}

type：表示时间的类型
currentTarget表示事件附带的内容
detail：表示点击事件发生的坐标，格式：（x,y）

另一个例子：
wxml:

<text bindtap="onModifyRecord" data-itemid="{{item.id}}"
						data-itemdevicename="{{item.device_name}}"
						data-itemdeviceid="{{item.device_id}}">修改</text>

js:

  var id=e.currentTarget.dataset.itemid;
  var deviceName=e.currentTarget.dataset.itemdevicename;
  var deviceId=e.currentTarget.dataset.itemdeviceid;

（四）页面数据传递

4.1 wx.navigate options

4.2 缓存全局传递

（三）容易出错的地方

3.1 globalData全局变量的设置

在app.js中设置全局服务器Url：

  globalData: {
    userInfo: null,
    serverUrl:"https://127.0.0.1"
  }

在query.js开头引用全局serverUrl:

var app = getApp();
var myUrl = app.globalData.serverUrl;

3.2 JSON和JS对象

参考教程 https://www.runoob.com/js/js-json.html

1）JS对象 和 JSON （本质：格式字符串）

//js对象
var obj = {a: 'Hello', b: 'World'}; //这是一个js对象，注意js对象的键名也是可以使用引号包裹的,这里的键名就不用引号包含

//json字符串
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

2）相关转换函数 JSON.parse() | JSON.stringify

• JSON.parse() —— 用于将一个 JSON 字符串转换为 JavaScript 对象
• JSON.stringify() —— 用于将 JavaScript 值转换为 (JSON) 字符串

实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}  一个对象

实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'  一个JSON格式的字符串

3）什么时候使用？

通常我们从服务器中读取 JSON 数据，然后用json.parse()将JSON转化为js对象，并在网页中显示数据。

简单起见，我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程):

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后，在你的页面中使用新的 JavaScript 对象：

实例

var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

3.4 ajax示例应用

3.3 this关键字使用

1）Javascript 中的 this关键词详解

https://www.w3school.com.cn/js/js_this.asp
关键在于：
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值，具体取决于它的使用位置：

• 在方法中，this 指的是所有者对象。
• 单独的情况下，this 指的是全局对象。
• 在函数中，this 指的是全局对象。
• 在函数中，严格模式下，this 是 undefined。[请看第二点wx小程序中的this]
• 在事件中，this 指的是接收事件的元素。
• 像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

谁调用这个函数或方法,this关键字就指向谁

2) wx小程序中的this : 指向全局对象 ？是undefined来着

参考链接（1）https://blog.youkuaiyun.com/u012717715/article/details/90667758
参考链接（2）
https://blog.youkuaiyun.com/qq_33956478/article/details/81348453

函数没有所属对象：指向全局对象

var myObject = {value: 100};
myObject.getValue = function () {
  var foo = function () {
    console.log(this.value) // => undefined
    console.log(this);// 输出全局对象 global
  };
 
  foo();
 
  return this.value;
};
console.log(myObject.getValue()); // => 100

在上述代码块中，foo 函数虽然定义在 getValue 的函数体内，但实际上它既不属于 getValue 也不属于 myObject。foo 并没有被绑定在任何对象上，所以当调用时，它的 this 指针指向了全局对象 global。

据说这是个设计错误。

3) wx中正确的 使用this修改data数据

在微信小程序中我们一般通过以下方式来修改data中的数据

doCalc:function(){
    wx.request({
      url: url,
      method:'POST',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        if (res.data.code == 0){
          this.setData({ //这里试图使用全局变量进行修改
          //结果：`this.setData is not a function`
            maxCount: res.data.maxCount
          });
        }
      }
    })
  }

这是因为this作用域指向问题 ，success函数实际是一个闭包 ， 无法直接通过this来setData

那么需要怎么修改呢？

方法1：赋给一个新的对象

我们通过将当前对象赋给一个新的对象

var that = this;

然后使用that 来setData就行了

doCalc:function(){
    var that = this;
    wx.request({
      url: url,
      method:'POST',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        if (res.data.code == 0){
          that.setData({
            maxCount: res.data.maxCount
          });
        }
      }
    })
  }

方法2：使用箭头函数

箭头函数语法：

• 之前：

hello = function() {
  return "Hello World!";
}

• 用了箭头函数之后：

hello = () => {
  return "Hello World!";
}

另外说一下 ， 在es6中 ， 使用箭头函数是不存在这个问题的

例如 ：

setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

箭头函数里面根本没有自己的this，而是引用外层的this。

  /**
   * 页面的初始数据
   */
  data: {
    imageSrc: '',
  },
 
  /**
   * 图片选择事件
   */
  chooseImage: function() {
    // var self = this;    // 这里不用复制
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'],      // 可以指定来源是相册还是相机，默认二者都有
      success: res => {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        console.log(res.tempFilePaths);
        this.setData({
          imageSrc: res.tempFilePaths[0],
        })
      },
    });
  },

（四）IDEA部署wx - java后端

4.1 创建项目

4.2 配置SDK tomcat服务器…

• 更改这个path路径：
  
• 没有classes和lib就新建
  
• 添加tomcat的lib进去：
  
  
• 配置tomcat服务器
  
• 点击+增加tomcat-local template
• 然后在deployment中添加
  
• 前面的几个也改一下
  
• 虚拟路径选项

4.3 有效减少乱码 IDEA UTF-8的设置

1）console报错乱码

• 点configure- custom VM 大概是这个名字
  

• 加这样一句
  

• 这里也加
  

• 在IDEA 安装目录bin
  两个文件最后一行添加 （Dfile…上面那一句）
  

2）拷贝过来的code乱码

• 拷的代码时是GBK格式的 到 UTF-8下中文注释出现乱码
  
• 把GBK项目代码拷贝到记事本 再从记事本拷进UTF-8项目即可