ubuntu18.04微信小程序学习笔记

学习笔记"/>

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({ })方法即可解决此问题。

安装微信小程序开发工具

1. 1.  安装

       

   2. 创建快捷方式

      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来解释)

1. .html .htm文件

   骨架：相当于一个英雄

    

2. .css

   样式：相当于英雄的皮肤

    

3. .js

   逻辑：相当于这个英雄的QWER技能

    

4. .json

   配置：英雄的基本技能，开局只有一个技能...

图片：移动设备的分辨率与rpx

如何做不同分辨率设备的自适应：

为什么要以ip6来换算，因为ip6下1px = 1rpx

转载于:.html