• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [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));
  }
})

  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序开发踩坑记发布时间:2022-07-22
下一篇:
微信小程序云开发之云音乐发布时间:2022-07-22
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap