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

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" 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));
  }
})