在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
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;] 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)); } })
|
请发表评论