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

<view id="tapTest" bindtap="tapName"> Click me! </view>

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

<view id="tap1" data-hi="绑定组件" bindtap="tapName">
<view id="tap2" data-hi="触发组件源"></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));
}
})

  

“微信小程序” js部分注解的更多相关文章

  1. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  2. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  3. 微信小程序室内地图导航开发-微信小程序JS加载esmap地图

    一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小 ...

  4. 微信小程序 js结构

    // pages/index/index.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function ...

  5. 微信小程序JS导出和导入

    1. 导出 1.1 方法和变量导出(写在被导出方法和变量的js文件) module.exports = { variable: value, method : methodName } 1.2 cla ...

  6. 微信小程序 js逻辑

    }) 页面 Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. data 页面的初始数据,data 将会以 JSON 的形式由逻辑层 ...

  7. 微信小程序 JS 获取View 和 屏幕相关属性(高度、宽度等等)

    wx.getSystemInfo({success: function (res) {thisWidth = res.windowWidth;}}); that.setData({view_Width ...

  8. [微信小程序] js变量名称写活

    function create_variable(num){ var name = "test_"+num; //生成函数名 window[name] = 100; window[ ...

  9. 微信小程序-js为object添加属性

    代码如下: var my_set = result.attributes.my_set; if (my_set == undefined) { my_set = { is_be_agree: e.de ...

随机推荐

  1. soj97 旅行

    题意:给你一棵n个点的树.m个操作,op 1:在点i上建立银行.op 2:询问从点x开始可以经过至少一个银行走到的点中编号第二大的点. n,m<=1e5. 标程: #include<bit ...

  2. MAC地址获取,有线网卡与无线网卡、物理网卡与虚拟网卡的区分

    获取当前活跃状态的网卡MAC地址.物理地址 Wmic命令:Win32_NetworkAdapter和Win32_NetworkAdapterConfiguration. 其中cmd命令行执行: 1. ...

  3. 阿里巴巴大数据产品最新特性介绍--机器学习PAI

    以下内容根据演讲视频以及PPT整理而成. 本次分享主要围绕以下五个方面: PAI产品简介 自定义算法上传 数加智能生态市场 AutoML2.0自动调参 AutoLearning自动学习 一.PAI产品 ...

  4. 3、变量+运算符+Scanner

    1.变量 1>开辟内存空间 int num ; 2>赋值 num = 10; 3>使用 num 1*long 类型的特殊 long num = 12L 2*float类型特殊 flo ...

  5. Ubuntu安装Windows软件

    https://www.cnblogs.com/chendeqiang/p/10177530.html Windows系列软件 安装Deepin封装好的框架 git clone https://git ...

  6. Zuul微服务网关

    Zuul简介:         Zuul是Netflix开源的微服务网关,它可以和Eureka.Ribbon.Hystrix等组件配合使用.Zuul的核心是一系列的过滤器,这些过滤器可以完成以下功能 ...

  7. VUE环境下获取当前时间并格式化--按秒数更新

    <el-col :span="8"><div class="grid-content title-time"> {{date}}< ...

  8. 关于SqlServer的内连接,外链接以及left join,right join之间的一些问题与区别。

    就我个人理解通俗点来说内连接和外连接区别: 内连接 inner join或者 join (被默认为内连接) : 内连接的原理是:先进行语句判断和运行得出结果,然后在将结果连接起来,一般是横着连接. 外 ...

  9. vmware centos 扩容

    1.停止后vmware 扩容 2.centos 增加分区 #增加分区fdisk /dev/sda 操作 /dev/sda 的分区表 p 查看已分区数量(我看到有两个 /dev/sda1 /dev/sd ...

  10. <meta>标记

    <meta>的主要作用: 是提供网页的元素信息 属性: http-equiv: 功能: 默认http协议文件头信息,当信息从服务器端传到客户端时,让浏览器正确的是显示, http_equi ...