微信小程序 笔记与练手demo

周南城
570 阅读7分钟

前言

我总结的都是我看过七月老师的视频之后，再看文档觉得自己有必要记录的部分知识点，主要也是怕自己忘了。目前我的版本是2.1.0

其中带？？？的点，表示我自己还没去研究的，未来将会完善

demo

跟着七月老师慕课网的视频，基本照着写了一遍，断断续续的大概用了一周的时间，七月老师讲得很细，在此墙裂推荐给跟我一样刚入门的小白。（目前，我还没怎么看过其他更多的资料）

image
image
image
image
image
image

demo地址

正文

逻辑层

  1. 结合小程序的生命周期，对界面的设置，不要在onLoad中设置，最好在页面初次渲染完成（onReady）后进行，比如wx.setNavigationBarTitle
  2. 当前版本下，打开tabBar只能使用switchTab了，而navigateTo, redirectTo 只能打开非 tabBar 页面
  3. 工具类的引入使用require，而当前版本下，require 暂时不支持绝对路径

视图层

  1. 只有在text标签内的文字才能在手机中被长按选中
  2. 只有在text标签内的文字，绑定数据的时候只需要两个{}，而其他地方绑定数据均需要引号""
  3. checked="false"的结果也是为true（这里只要有值都会被认为是true），因为会被当成一个字符串，转换成boolean后还是为true，所以如果想要为false，则需写成checked="{{false}}"
  4. ...表示扩展运算符，会将一个对象展开
  5. 循环wx:for中，默认下标是index，默认当前项为item，所以以下代码是可以被识别到的
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

其次还可以通过wx:for-index和wx:for-item分别指定下标和当前项的名称

  1. 在列表中，经常和block结合使用，而block相当于一个括号而已，在括号内的部分会被视为一个整体，它本身并不会被当成一个组件进行渲染
  2. template中路径最好使用绝对路径，因为每个引用该模版的文件，所处的项目位置不一样
  3. 使用template的时候，template的wxml和wxss都需要被分别引入目标文件的wxml和wxss中
  4. 当前版本中，template的事件并不能在模板内部处理，而需要在使用的目标文件中写具体的事件，模板相当于只封装了布局和样式
  5. template的使用：使用 is 属性，声明需要的使用的模板，然后将模板所需要的data传入
  6. 对于公共布局的使用，import和include都可以将公共布局引入目标布局中，但如果需要传参的话，则使用import，不需要的话，则可以使用include，相当于整个拷贝过去
  7. 事件需要或者不在乎冒泡(当一个组件上的事件被触发后，该事件会向父节点传递)，可以使用bindtap，不要冒泡的使用catchtap(当一个组件上的事件被触发后，该事件不会向父节点传递)
  8. target和currentTarget的区别，target指的是当前点击的组件即触发事件的源组件，currentTarget指的是事件捕获的组件即事件绑定的当前组件。
<swiper catchtap='onSwiperTap' indicator-dots='true' autoplay='true'>
    <swiper-item>
      <image src='/resources/imgs/banner_1.jpg' mode='aspectFill' data-postid='0'/>
    </swiper-item>
    <swiper-item>
      <image src='/resources/imgs/banner_2.jpg' mode='aspectFill' data-postid='1'/>
    </swiper-item>
    <swiper-item>
      <image src='/resources/imgs/banner_3.jpg' mode='aspectFill' data-postid='2'/>
    </swiper-item>
  </swiper>
  
在上面的例子中，target指的是image，而currentTarget指的是swiper，所以如果要获取每个item的id的话，应该用target

不管是target还是currentTarget，获取数据都是目标组件上由data-开头的自定义属性组成的集合

比如，在下面的代码中，捕获事件的是父组件，而触发事件的是子组件，所以外层是currentTarget，而内层才是target

注意参数的命名规则，wxml参数名字不能识别大写，所以data-userId还是会被识别为data-userid，但如果想要在获取的时候使用驼峰，则可以单词与单词之间使用-隔开，比如data-user-id，获取的时候就可以是dataset.userId

<view id='view' data-user-id='111' data-name='dad' catchtap='onViewClick'>
  <text id='text' data-user-id='222' data-name='son'>show me</text>
</view>

var Logger = require('../../utils/Logger.js')

Page({
  onViewClick:function(event){
    Logger.v("onViewClick",event);

    var fatherDataSet=event.currentTarget.dataset;
    var sonDataSet=event.target.dataset;

    var fatherId=event.currentTarget.id;
    var sonId=event.target.id;

    var fatherUserId=fatherDataSet.userId;
    var sonUserId = sonDataSet.userId;

    var fatherName=fatherDataSet.name;
    var sonName=sonDataSet.name;

    Logger.v("fatherId", fatherId);
    Logger.v("sonId", sonId);

    Logger.v("fatherUserId", sonUserId);
    Logger.v("sonUserId", sonUserId);
    
    Logger.v("fatherName", fatherName);
    Logger.v("sonName", sonName);
  }
})

将event打印出来就是（主要看currentTarget和target，另外表单的值会在detail的value中获取）

image

其余参数打印出来

image

  1. dataset的定义由data-开头，多个单词由字符-连接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})
  1. 表单组件提交事件携带的用户输入内容，在event.detail中获取，比如input
  2. exports: 通过该属性，可以对外共享本模块的私有变量与函数，经常会在工具类中用到，比如

util.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}


/**
 * 网络请求
 */
function http(netUrl, callBack) {
  wx.request({
    url: netUrl,
    success: function(res) {
      console.log("http response: ", res)
      callBack(res.data);
    },
    fail: function(res) {
      console.log("http error: ", res)
    }
  })
}

module.exports = {
  formatTime: formatTime,
  http: http
}

使用

movie-detail.js

var util = require('../../utils/util.js')

Page({
    onLoad: function(options) {
    wx.showLoading({
      title: '加载中...',
    })

    var movieId = options.id;
    var detailUrl = app.globalData.doubanBase + 'v2/movie/subject/' + movieId;
    util.http(detailUrl, this.processDoubanData);
  }
})
  1. 微信小程序中的rpx，类比理解为android中的dp，都可以根据屏幕宽度进行自适应
  2. 组件的子组件的命名，例如view.weui-footer组件还有链接和版权信息。组件和子组件使用两个下划线衔接，所以要区分什么时候用"-",什么时候用"__"
<view class="weui-footer">
<view class="weui-footer__links">
    <navigator url="" class="weui-footer__link">百度</navigator>
</view>
<view class="weui-footer__text">Copyright © 百度哦</view>
</view>
  1. 以下表示使用样式circle-img的组件内部所有的image的样式如下（在css中，这个叫descendant后代选择器（我js和css其实都不太懂的））

css选择器了解一下

.circle-img image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 5%;
}

而我看官方给的文档里，好像没说这个

image

此外：

::before和::after是啥

  1. 自定义组件
  2. -webkit-filter是什么
  3. -webkit-transform是啥。是不是为了适配，所以分为-moz-animation，-webkit-animation，-o-animation。keyframes也分为这三种。
  4. 插件的使用
  5. 插件开发？？？
  6. 分包？？？
  7. 多线程？？？
  8. 性能优化？？？
  9. 如果要使用下拉刷新，内部的scroll-view会无响应，需改成view
  10. 控制组件显隐的wx:if与hidden的区别:
    image
  11. image组件如果不设置它的大小的话，它也会有个默认值，默认宽度300px、高度225px
  12. 表单的整体提交？？？单个尝试？？？
  13. 媒体组件？？？
  14. 地图
  15. 画布？？？
  16. 开放能力？？？
  17. 上传下载，websocket？？？
  18. 录音？？？相机？？？分享？？？
  19. 如果想在真机上调试，则可以点击IDE上面的远程调试，会出来一个二维码，真机扫描该二维码即可在真机上调试，当点击小程序右上角的退出按钮，退出小程序，再次进入小程序，还是处于调试状态（如果不结束调试的话）
    image

image

  1. 代码片段（我咋还体会不到它的优势和好处呢）
  2. 使用插件？
  3. 素材管理？？？
  4. 代码托管？？？
  5. ……

其他资料

css教程

微信小程序官方demo

另外一个视频教程

weui的使用方法

写在最后

我刚入门哈，有什么理解得不对的地方，欢迎大家多多指正

avatar
文章
阅读
粉丝

友情链接：