微信小程序笔记

本文是在阅读雷磊老师的《微信小程序开发 入门和实践》之后总结的笔记。

微信小程序开发

第一章 微信小程序简介

一、微信小程序：一种不需要下载安装即可使用的应用

第二章 小程序环境搭建与开发工具介绍

一、微信Web开发者工具

二、新建第一个项目

（一）打开开发者工具，登陆微信号

（二）点击小程序项目

（三）在填写AppID时，需要注意，它代表微信雄小程序的id号，必须拥有微信小程序账号才可以申请这个id号。可以去https://mp.weixin.qq.com注册申请账号。

（四）那么开始创建项目，由于某种原因，先创建一个无appId的项目

1. 填入项目名称，最好是英文
2. 选择一个空的文件夹，放小程序
3. 官方给了一个实例
4. 熟悉开发者工具的用法，以及面板上各个区域分别代表什么

（五）简单介绍一下项目配置

1. 开启ES6转化为ES5：为了保持ios,android和开发者工具模拟器良好兼容
2. 开启上传代码时样式自动补全
3. 开启代码压缩上传
4. 监听文件变化，开发者工具
5. 开发环境不校验请求域名以及TLS版本

如果开启了此项，开发工具将不会校验安全域名以及TLS版本，更方便调试；如果想要使用appid模式，又想要方便调试，开启此项

（六） 快捷键:

1. ctrl+B 编译

第三章 开始小程序

一、 每次创建一个新页面时，都需要手动创建一个目录+4文件，这时在app.json中添加路径，就会自动创建这些

{

"pages":[

"pages/welcome/welcome",

"pages/orange/orange"

]

}

要是使.wxml文件中的文字显示出来，要求：1.  .js文件不为空，调用其本身的方法

Page({

})      2. .json文件不能为空   {   }

二、 构建welcome页面的元素和样式

1．<view> 通常作为容器来使用，

三、 最好不要将图片资源放在项目目录中，微信小程序大小不能超过1MB

四、 小程序中所支持的css选择器：六种

1．.class

2．#id

3．Element  选择所有view组件

4．Element,element 选择所有文档的view组件和的checkbox组件

5．::after 在view组件后边插入内容

6．::before 在view组件前边插入内容

五、 Flex布局

1．宗旨是使页面布局更加简单，可以更好的支持响应式布局

2．Flex-direction这个属性指定view内元素的排列方向

（1）row 主轴为水平，自左而右

（2）cloumn 主轴为垂直，自上而下

（3）row-reverse 主轴为水平，自右而左

（4）column-reverse 主轴为垂直，自下而上

3．align-items属性定义子元素在交叉轴上如何对齐，特别注意，他定义的是交叉轴这个方向上的子元素的对齐方式。

4．小程序自适应单位rpx介绍

（1） 在iPhone 6标准下，1物理像素=1rpx=0.5px

（2） rpx可以使组件自适应屏幕的宽度和高度，但px不会

5．全局样式文件app.wxss 是为所有页面设置“默认样式”。

6．页面的根元素Page，设置整个页面的样式，属性，这样的话，他就不会随着组件的设置样子

page{

 

}

7．app.json中的window配置项

（1）“window”:{“navigationBarBckgroundColor:’#ffffff’” }这样设置导航栏，不是被隐藏，只是换了颜色

（2）它的属性还有 ：

①navigationBarTextStyle 配置导航栏文字颜色，只支持black/white

②navigationBarTitleText 配置导航栏文字内容

③backgroundColor配置窗口颜色

④backgroundTextStyle 下拉背景字体，支持dark/light

⑤enablePullDownRefresh 是否开启下拉刷新

需要往小程序中加入图片时，一定要在对应文件夹下进行复制，不能在开发者工具里面ctrl+c 和ctrl+v

第三章 文章列表页面

一、Swiper组件

1．自带轮播图效果的组件

<view>

  <swiper>

    <swiper-item>

      <image src='/images/post/city.jpg'></image>

    </swiper-item>

    <swiper-item>

      <image src='/images/post/butterfly.jpg'></image>

    </swiper-item>

    <swiper-item>

      <image src='/images/post/desert.jpg'></image>

    </swiper-item>

    <swiper-item>

      <image src='/images/post/flowers.jpg'></image>

    </swiper-item>

  </swiper>

</view>

2．还可以设置swiper的样式，以及image的样式，但是swiper和image的宽高要同时设置，才可以达到预期的效果

3．Swiper的一些属性

（1）indicator-dots='true' 用来显示面板上的指示点,默认时false

（2）autoplay='true' 用来决定是否自动播放

（3）interval='5000' 切换的时间间隔

（4）Circular=”true” 使轮播图循环滚动

4．切换方式可以通过拖动图片切换，也可以通过点击面板指示点切换

5．vertical='true'，表示轮播图的指示点竖直排列

6．Boolean的陷阱，当需要设定属性值为false时，就应该写成空字符串的形式。

二、构建文章列表的骨架和样式

1．Image组件的4种缩放模式

（1）scaleToFill 按比例填充，默认模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素

（2）aspectFit 方位固定，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整的将图片显示出来

（3）aspectFill 方位填充，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平和垂直方向是完整的，另一个方向将会发生截取

（4）widthFix 宽度不变，高度自动变化，保持原图宽高比不变

2．9种裁剪模式，不会缩放图片的

（1）Top

（2）Bottom

（3）Center

（4）Left

（5）Right

（6）Top left

（7）Top right

（8）Bottom left

（9）Bottom right

3．页面的生命周期 post.js

// pages/post/post.js

Page({

 

/**

* 页面的初始数据

*/

data: {

 

},

 

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

 

},

 

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

 

},

 

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

 

},

 

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

 

},

 

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

 

},

 

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

 

},

 

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

 

},

 

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

 

}

})

4．数据绑定

（1）初始化数据绑定显示数据

Post.js--------------------------------》

data: {

object:{

date: "May 18th 2019",

},

title:"小时候的冰棍与雪糕",

postImg:"/images/post/flower.jpg",

avatar:"/images/avatar/avatar-1.png",

content:" 6．Boolean的陷阱，当需要设定属性值为false时，就应该写成空字符串的形式。6．Boolean的陷阱，当需要设定属性值为false时，就应该写成空字符串的形式。",

//readingNum:"108",

//collectingNum:"92",

commentNum:{

array:[108,22,11]

},

Post.wxml--------------------------------》

 <view class='post-author-date'>

    <image src="{{avatar}}"></image>

    <text class='post-date'>{{object.date}}</text>

  </view>

  <text class='post-title'>{{title}}</text>

  <image class='post-image' src='{{postImg}}' mode='aspectFill'></image>

  <text class='post-content'>

   {{content}}

  </text>

  <view class='post-like'>

    <image src='/images/post/city.jpg'></image>

    <text>{{commentNum.array[2]}}</text>

    <image src='/images/post/city.jpg'></image>

    <text>{{commentNum.array[1]}}</text>

    <image src='/images/post/city.jpg'></image>

    <text>{{commentNum.array[0]}}</text>

  </view>

（2）数据绑定更新

setData函数来做数据绑定，这个方法位于Page对象的原型链上：Page.prototype.setData.

setData的参数接受一个对象，以key和value的形式将this.data中的key对应的值设置成value

注意：setData会改变this.Data变量相同key的值，

setData执行后，会通知逻辑层执行Rerender，并立刻重新渲染视图。

5．页面的json文件配置和app.json文件的配置有什么不同

（1）页面json只能够配置和window相关的属性。但app.json除了能配置window外还可以配置pages，tabBar等选项

（2）页面的json配置不需要像app.json那样，加上window选项，直接编写window下面的配置项即可

6．跳转页面

（1）什么是事件

事件是视图层(wxml)到逻辑层(js)的通信方式。

属性：catchTap

（2）关于跳转

wx.redirectTo 将关闭当前页面，跳转至指定页面

wx.navigateTo 保留当前页面，跳转至指定页面

wx.switchTap 只能用于跳转到带tabbar的页面，并关闭其他所有非tabBar页面

重点：redirectTo和navigateTo 的区别

使用方式相同，都要注意url的页面路径，不需要加上跳转文件的扩展名

Object参数可以接收三个方法，

success:页面跳转成功时，MINA框架将调用此函数

fail:页面跳转失败时，MINA框架将调用此函数

complete:页面跳转成功或失败时，MINA框架将调用此函数

7．冒泡事件与非冒泡事件

冒泡事件是指某个组件上的事件被触发后，事件还会向父级元素传递；父级元素还会继续向父级的父级传递，一直到页面的顶级元素。

非冒泡事件则不会向父级元素传递事件

常见的冒泡事件

（1）touchstart 手指触摸动作开始

（2）touchmove手指触摸后开始移动

（3）touchcancel手指触摸动作被打断，如来电提醒，弹窗

（4）tap手指触摸后马上离开

（5）longtap手指触摸后，超过350ms再离开

8．在wxml里面注册组件，需要在事件名之前添加catch或者bind前缀

9．bind和catch的区别

对于以上几个冒泡事件，catch将阻止事件继续向父节点传播，而bind不会阻止事件的传播。

10．某些组件特有的事件

（1）<form>的submit

（2）<input>的input

（3）<scroll-view>的scroll事件