学习笔记"/>
ubuntu18.04微信小程序学习笔记
关于template与自定义数据(data-)的小知识
<!-- block 相当于一个括号 item默认为item 下标默认为index --> <block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="index"> <!-- template --> <!-- data里面加了‘...’之后,template就不用对象.属性了, 相当于把posts_data.js中的数据对象给展开了 --> <!-- 不能在template里面加事件函数,因为template最后会被取代成实际代码 --> <!-- 自定义数据(data-xxx)可以加对个‘-’,第一个单词会全小写, 以后的每一个‘-’后面使用驼峰命名法 --> <view catchtap="postDetail" data-postId="{{item.postId}}"> <template is="postItem" data="{{...item}}" /> </view> </block>
-
在js中获取我们的自定义数据
// event:是框架给我们的事件对象 // currentTarget:是鼠标的单击事件 // dataset:是我们自定义数据(data-xxx)的集合 var postId = event.currentTarget.dataset.postid;
var postId = event.currentTarget.dataset.postid;
-
介绍:注意到,我们在wxml文件中声明的是【data-postId】,这里获取值时必须全小写
自定义数据(data-xxx)可以加对个‘-’,第一个单词会全小写,以后的每一个‘-’后面使用驼峰命名法
target 和 currentTarget的区别
target指的是当前点击的组件
currentTarget指的是事件捕获的组件
-
代码实例:
<swiper catchtap='onSwiperTap' autoplay="true" interval='2000' indicator-dots='true' indicator-active-color='white'> <swiper-item> <image bindtap='onSwiperItemTap' src='/images/wx.png' data-postId='3'></image> </swiper-item> <swiper-item> <image src='/images/vr.png' data-postId='4'></image> </swiper-item> <swiper-item> <image src='/images/iqiyi.png' data-postId='5'></image> </swiper-item> </swiper>
- 解析:target这里指的是image,而currentTarget指的是swiper
- 其它:
根据事件的冒泡机制:第一个轮播图我还绑定了一个bintap,当我们点击第一张轮播图时,会执行两个方法,先执行bindtap,再执行catchtap。
<view><view bindtap='tapA'> aa<view bindtap='tapB'>bb</view> </view> </view> <view> <view catchtap='tapA'> aa<view catchtap='tapB'>bb</view> </view> </view>
这段代码唯一的区别就是绑定事件的方式 bindtap:点击bb会触发父元素上的a事件(冒泡) catchtap:点击bb不会触发a事件(不冒泡)
微信小程序wx.navigateTo不执行也不报错
- 原因:上面的代码有冲突,在有代码2的情况下,代码1不会执行
代码一:【使用页面的js】wx.navigateTo({url: '/pages/posts/post', })
代码二:【app.json】
"tabBar": {"borderStyle" : "white","position" : "bottom","list": [{"pagePath": "pages/posts/post", "text": "文章", "iconPath" : "images/tab/yuedu.png", "selectedIconPath" : "images/tab/yuedu_hl.png" }, { "pagePath": "pages/movies/movies", "text": "电影", "iconPath": "images/tab/dianying.png", "selectedIconPath": "images/tab/dianying_hl.png" } ] },
使用wx.redirectTo也不行
-
解决办法:使用wx.switchTab
微信小程序给icon组件绑定【bindtap或者catchtap】事件都不执行也不报错
bindtap绑定事件,能够打印出even信息;而catchtap打印不出even信息。即catchtap是不能获取到被绑定的组件的信息。
- 原因一:原生组件不能绑定
JS实现给对象动态添加属性并赋值 及 实现AJAX data传递动态key键名
- 声明对象
- 案例:这里的【settedKey】表示:inTheaters、comingSoon、top250
var readyData = {};readyData[settedKey] = {// 3类大标题categoryTitle: moviesDoubanData.title,movies: movies} this.setData(readyData);
- 解析
在某种情况下, AJAX data可能根据不同的key键名称传递不同的value值,这时需要传递动态key键名,下面来解决ajax中data传参键名是变量不能识别的问题:
问题: 如key='name',value='shilei',传递过去的数据是{key:shilei}, 而不是{name:shilei}.
原因: json解析时key都按字符串解析,不识别变量.
解决方案: 使用对象类型来进行传递.var obj = {};key = 'name';value = 'shilei';obj[key] = value; //相当于obj['name'] = 'shilei';//此时ajax的data数据项应改为data:obj,
微信小程序请求豆瓣API报403
- 第一步:
url:'/'+options.id 换成 url: '/'+options.id
- 第二步:
把 ‘Content-Type’: ‘application/json’改成 ‘Content-Type’: ‘application/xml’,或者将‘Content-Type’的值直接设置为'json',切记不能是 application/json 或 ' '。
请求报错GET =xue 404 (Not Found)
报错:TypeError: Cannot read property 'setData' of undefined
- 原因:在js中的中使用了【更新数据绑定的变量】的方法:
this.setData({}),this是指函数调用额上下文环境;
因为我把它放到了success回调函数里,所以这个this的指代就不是在Page({})的结构体里了,
所以,就不能使用setData方法
-
解决办法:在回调函数外面保存this
var than = this; wx.showModal({//xxxsuccess: function (res) { if (res.confirm) { console.log('用户点击确定'); than.setData({ //绑定数据 }) } } })
JS中在【页面的初始数据--data】中声明参数,通过单击事件改变值不生效
Page({
/** * 页面的初始数据 */ data: { // 记录音乐的播放状态 isPlayingMusic: false, }, )}
- 原因:在单击事件里绑定值时用的是:
this.data.isPlayingMusic : false;
- 解决办法:
this.setData({isPlayingMusic: false, })
如果在onLoad方法中,不是 异步的去执行一个数据绑定, 则不需要使用this.setData方法,只需要对this.data赋值即可实现数据绑定。
微信小程序navigationBarBackgroundColor设置导航栏背景颜色失败
-
解决办法1:使用颜色的16进制表示方式
-
解决办法2:
报错:Page is not constructed because it is not found.
-
解决方法:在需要切换到的那个页面的js文件中添加Page({ })方法即可解决此问题。
安装微信小程序开发工具
-
-
安装
- 创建快捷方式
sudo nautilus//在/usr/share/applications/下随便复制一个来修改 #!/usr/bin/env xdg-open[Desktop Entry] Encoding=UTF-8 Type=Application Name[zh_CN]=wechat_web_devtools Comment=Tencent WeChat Client on Deepin Wine Exec="/home/soldier/wechat_web_devtools/bin/wxdt" -u %u Icon=/home/soldier/wechat_web_devtools/timg.jpeg Terminal=false StartupNotify=true Type=Application
-
微信小程序项目的架构
离pages越近的配置文件优先级越高;一个页面最多能存在5级
在pages下一个目录文件相当于一个页面,每个页面目录下都有四个文件:(用LOL来解释)
- .html .htm文件
骨架:相当于一个英雄
- .css
样式:相当于英雄的皮肤
- .js
逻辑:相当于这个英雄的QWER技能
- .json
配置:英雄的基本技能,开局只有一个技能...
图片:移动设备的分辨率与rpx
如何做不同分辨率设备的自适应:
为什么要以ip6来换算,因为ip6下1px = 1rpx
转载于:.html
更多推荐
ubuntu18.04微信小程序学习笔记
发布评论