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

关于template与自定义数据(data-)的小知识

<block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="index">

        

<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'>bbview> view> view> <view> <view catchtap='tapA'> aa<view catchtap='tapB'>bbview> 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:'https://api.douban.com/v2/movie/subject/'+options.id          换成 
  url: 'https://douban.uieee.com/v2/movie/subject/'+options.id

• 第二步：

   把 ‘Content-Type’: ‘application/json’改成 ‘Content-Type’: ‘application/xml’，或者将‘Content-Type’的值直接设置为'json',切记不能是 application/json 或 ' '。

   

请求报错GET https://douban.uieee.com/v2/movie/search?q=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({
      //xxx
      success: 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：https://blog.csdn.net/builder_taoge/article/details/79541507

 

报错：Page is not constructed because it is not found.

• 解决方法：在需要切换到的那个页面的js文件中添加Page({ })方法即可解决此问题。

 

安装微信小程序开发工具

1. 1.  安装

      https://github.com/cytle/wechat_web_devtools

       

   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

 

 

 

转载于:https://www.cnblogs.com/HuangJie-sol/p/10740538.html