“微信小程序”js部分注解

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

1、小程序不提供获取dom的操作，而是让我们直接将事件绑定写入到组件内。区别在于bind不阻止冒泡，而catch阻止冒泡。

<view > Click me! </view>

2、currentTarget和target两个属性，前者是绑定事件的组件，后者是触发事件的组件源。

<view >
  <view ></view>
</view>

　　我们再输出看看（为了方便对比，只保留下currentTarget和target两个属性）:

{
 "target": {
  "id": "tap2",
  "dataset": {
   "hi":"触发组件源"
  }
 },
 "currentTarget": {
  "id": "tap1",
  "dataset": {
   "hi":"绑定组件"
  }
 }
}

3、data-hi和dataset，这两个属性有什么关系呢？

　　dataset的值其实就是我们设置的data-xxx（html中常见的自定义属性的写法，而在小程序中，则被用来传参）的值，而xxx则是dataset里面的key。

4、如何去动态的改变样式呢？

　　我们没有办法直接获取dom然后去改变他的样式，所以我们只能通过data里的属性来控制样式的变化，如上面的代码，overflow的值取决于screenType的值是否存在，如果存在，则overflow: hidden，反之overflow: scroll-y；那么我们只需要改变screenType的值。要改变screenType的值也简单了，小程序提供了this.setData方法，可以设置data内的值。

<view class="container" style="overflow: {{screenType?'hidden':'scroll-y'}}" bindtap="bindType">
Page({
 data: {
  screenType: ''
 },
 bindType: function(){
  this.setData({
    screenType: '1'
  })
 }
 })</view>

5、我们熟悉的ajax请求，在小程序里，它不叫ajax，而叫做wx.request。用法和ajax没什么区别，唯一需要特别注意的是，请求必须是https请求！而不是平常的http请求！除了必须要是https请求以外，还需要到小程序的后台里设置合法域名，否则无法请求。

6、data里面的数据类型只有这5种（字符串，数字，布尔值，对象，数组）。

7、setData函数用于将数据从逻辑层发送到视图层，同时改变对应的this.data的值。

8、在Page()函数内部this的作用域。。。

　　this代表着当前对象,随着程序的执行，当前对象已不存在时，需要。

　（总之，在使用this.data来获取数据获取不到时，var一下[var that=this;]//把this对象复制到临时变量that）（或者使用另外一种声明方式）

success: res =>{
  this.setData({
      loadingHidden: true,
      hideCommitSuccessToast: false
  })
}

9、根目录的app.js 文件我们可以通过getApp()轻松调用。

//app.js
App({
  globaData:'huangenai'
 })

//test.js
var app = getApp();
Page({
 onLoad: function () {
 console.log(app.globaData);
 } 
})

10、微信小程序引用公共js里的方法的实例详解。

　　在根目录下有个utils文件夹(没有的话新建)，里面util.js（没有的话新建）在这里我们可以将通用的方法写在这。

util.js
 
//正则判断
function Regular(str, reg) {
 if (reg.test(str))
  return true;
 return false;
}
 
//是否为中文
function IsChinese(str) {
 var reg = /^[\u0391-\uFFE5]+$/;
 return Regular(str, reg);
}
//去左右空格;
function trim(s){
  return s.replace(/(^\s*)|(\s*$)/g, "");
}
 
//最下面一定要加上你自定义的方法（作用：将模块接口暴露出来），否则会报错：util.trim is not a function;
module.exports = {
IsChinese: IsChinese,
trim: trim
}

//test.js
 
var util = require('../../utils/util.js');
Page({
  onLoad: function () {
  console.log("判断是否为中文:"+util.IsChinese('测试'));
  console.log("去除左右空格：" + util.trim(s));
  }
})