原生微信小程序开发笔记

前言

此教程适合用于复习原生微信小程序开发的知识点以及相关使用技巧

如果觉得此处的主题看起来不舒服可以尝试以下链接
原生微信小程序开发笔记

基础知识

组件

view

类似HTML里面的div
是一个块级元素

使用演示：

html 复制代码

<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

css 复制代码

.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightcyan;
}

.container1 {
  display: flex;
  justify-content: space-around;
}

实现效果：

最佳实践

就把这个组件当做HTML里面的div标签使用就可以了

scroll-view

实现可以滚动的视图效果

使用演示：

html 复制代码

<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

css 复制代码

.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightcyan;
}

.container1 {
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

注意需要scroll-y的意思是支持纵向滚动

同理也有scroll-x

设置了scroll-y之后需要给容器设置一个高来设置显示的区域大小

swiper和swiper-item

轮播图的容器组件
轮播图的item组件

使用演示：

html 复制代码

<swiper class="swiper-container" indicator-dots>
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

css 复制代码

.swiper-container {
  height: 150px;
}

.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

.swiper-item:nth-child(1) .item {
  background-color: lightgreen;
}

.swiper-item:nth-child(2) .item {
  background-color: lightskyblue;
}
.swiper-item:nth-child(3) .item {
  background-color: lightcoral;
}

效果：

swiper容器属性讲解

indicator-dots

是否显示面板指示点
html 复制代码
```
<swiper class="swiper-container" indicator-dots>
```
indicator-color

设置未激活的面板指示点的颜色
html 复制代码
```
<swiper class="swiper-container" indicator-dots indicator-color="red">
```

indicator-active-color

设置激活的面板指示点的颜色

html 复制代码

<swiper class="swiper-container" indicator-dots indicator-active-color="red">

autoplay

设置是否自动切换
html 复制代码
```
<swiper class="swiper-container" indicator-dots indicator-active-color="red" autoplay>
```
这样设置以后每五秒会自动切换轮播图

interval

设置轮播图自动切换的时间（单位为毫秒）

html 复制代码

<swiper class="swiper-container" indicator-dots indicator-active-color="red" autoplay interval="1000">

circular

设置轮播图可不可以衔接
html 复制代码
```
<swiper class="swiper-container" indicator-dots indicator-active-color="red" circular> 
```
默认轮播图是不可以衔接的，比如现在有三张，切换到第三张再继续的话默认是划不动的，加上了circular属性之后，切换到第三张以后再继续滑就可以到第一张

text

文本组件
类似于HTML里面的span组件，是一个行内元素

使用演示：

html 复制代码

<view>
  手机号长按选中效果：
  <text selectable>12222222222</text>
</view>

添加selectable属性可以实现用户长按实现复制的效果

在小程序中只有通过text组件添加selectable属性才可以实现长按选中效果

rich-text

通过rich-text组件的nodes属性可以实现把HTML字符串渲染为对应的UI结构

使用演示：

html 复制代码

<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

效果：

button

比HTML里面的功能要丰富
可以通过open-type属性调用微信提供的相关功能

使用演示：

html 复制代码

<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

<button plain>镂空按钮</button>
<button size="mini">小尺寸按钮</button>

效果：

这些属性可以混合搭配使用

image

图片组件
默认宽300px高240px

使用演示：

html 复制代码

<image></image>
<image src="/images/bg1.png"></image>

css 复制代码

image {
  border: 1px solid red;
}

效果：

默认情况下image标签会有300x240的长短比

此时可以增加mode属性设置图片的裁剪和缩放样式

image的mode属性参数讲解

aspectFit

==保持长宽比，使长边能完全显示出来（图片能够完全显示出来）==长边撑满
aspectFill

保持长宽比，使短边能够完全显示出来短边撑满
widthFix

保持长宽比，宽度不变，高度自动变化
heightFix

保持长宽比，高度不变，宽度自动变化

两类的区别（aspect和Fix）是

第一类的容器大小不变，让图片改变

第二类的容器大小变化，容器去适应图片

最佳实践：

使用widthFix

API

概述

1、事件监听API

特点：以on开头，用来监听某些事件的触发
举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件

2、同步API

特点1：以Sync结尾的API都是同步API
特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
举例：wx.setStorageSync('key', 'value')向本地存储中写入内容

3、异步API

特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete接受调用的结果
举例：wx.request()发起网络数据请求，通过success回调函数接收数据

数据绑定

与vue中类似，使用双花括号进行数据的绑定

在vue中属性的动态绑定需要用到v-bind语法，在微信小程序中不需要

使用演示：

html 复制代码

<view>{{ age }}</view>
<image src="{{ imgSrc }}" mode="widthFix"></image>
<view>{{ randomNum>5? '随机数大于5': '随机数不大于5' }}</view>
<view>{{ twoFixNum * 100 }}</view>

js 复制代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    age:20,
    imgSrc: 'https://ts2.tc.mm.bing.net/th/id/OIP-C.i-zc-bfSYOZgIyqjDBydfAHaHa?rs=1&pid=ImgDetMain&o=7&rm=3',
    randomNum: Math.random() * 10,
    twoFixNum: Math.random().toFixed(2)
  }
)}

效果：

可以通过调试器里面的AppData项来查看自己定义的具体数据的值

事件绑定

tap

绑定方式有：
- bindtap
- bind:tap
事件描述：

手指触摸后马上离开，类似于HTML里面的click事件
input

绑定方式有：
- bindinput
- bind:input
事件描述：

文本框的输入事件
change

绑定方式有：
- bindchange
- bind:change
事件描述：

状态改变时触发

bindtap使用演示

html 复制代码

<button type="primary" bindtap="btnTapHandler">按钮</button>

js 复制代码

data: {
    
},
/* 为按钮绑定触摸事件 */
btnTapHandler (e) {
  console.log(e)
}

注意此时的事件处理函数要与data同级编写

在事件处理函数中为data里面的数据赋新值

html 复制代码

<button type="primary" bindtap="btnTapHandler">+1</button>
<view>{{ count }}</view>

js 复制代码

data: {
  count: 0
},
btnTapHandler () {
  this.setData({
    count: this.data.count + 1
  })
}

利用setData修改数据的值

里面传递的是一个字典

字典里面的键是要修改的数据名，值是要修改成什么值

事件传参

bindtap

html 复制代码

<button type="primary" bindtap="sendValue" data-info="{{2}}">传递一个值</button>

接受这个参数时使用

e.target.dataset.参数名

例如此时就可以使用：
js 复制代码
sendValue (e) {
  console.log(e.target.dataset.info)
}
打印传递过来的参数
注意此时利用花括号的好处是如果不加花括号他就是字符串类型的数据

在传递字符串类型的数据时就不需要加花括号

bindinput

html 复制代码

<input bindinput="inputHandler"></input>

接受这个参数时使用

e.detail.value

例如此时就可以使用：
js 复制代码
inputHandler(e){
  console.log(e.detail.value)
}
打印文本框改变过后的最新的值

条件渲染

wx:if

可以搭配

wx:elif
wx:else

使用

使用演示：

html 复制代码

<view wx:if="{{ type === 1 }}">男</view>
<view wx:elif="{{ type === 2 }}">女</view>
<view wx:else>保密</view>

结合block使用wx:if

当我们需要同时控制多个标签的显示与隐藏，但又不想给页面增加多余的渲染元素时使用

block标签只是一个包裹性质的容器，他不会在页面中做任何的渲染

使用演示：

html 复制代码

<block wx:if="{{true}}">
  <view>标签1</view>
  <view>标签2</view>
</block>

效果：

不会渲染出来

hidden控制元素显示和隐藏

hidden也可以控制元素的显示和隐藏，但是他始终会渲染出来

使用演示：

html 复制代码

<view hidden="{{true}}">true的时候隐藏，false的时候不隐藏</view>

效果：

仍然被渲染出来了,注意隐藏的时候也不会占位置

列表渲染

wx:for

用于循环渲染，类似vue里面的v-for

使用演示：

html 复制代码

<view wx:for="{{ arr }}">
  索引是： {{ index }} 值是：{{ item }}
</view>

js 复制代码

data: {
  arr: ['苹果', '小米', '华为']
}

效果：

默认的名字是index和item

可以通过两个配置项来改名字

wx:for-index

wx:for-item

使用演示：
html 复制代码
<view wx:for="{{ arr }}" wx:for-index="idx" wx:for-item="itm">
  索引是： {{ idx }} 值是：{{ itm }}
</view>

wx:key

类似于vue，微信里面在循环渲染的时候也建议加上wx:key来提高渲染性能

使用演示：

html 复制代码

<view wx:for="{{ arr }}" wx:key="id">{{ item.name }}</view>

注意添加wx:key的时候不需要添加双花括号，添加了的话会出错

wxss

rpx

为了实现不同屏幕的大小适配

rpx把屏幕总宽度平均分为750份

即屏幕的总宽度为750rpx

例如：如果你的设备宽度是1500px，那么在你的设备上1rpx=2px

样式导入

通过==@import "路径";==可以导入外联样式表

css 复制代码

@import "/common/common.wxss";

全局样式和局部样式

在app.wxss里面定义的样式会在每一个页面中生效

权重相同时：当全局样式和局部样式冲突时，根据就近原则，局部样式会覆盖全局样式
权重不同时，谁高谁生效

怎么看权重：

如图，此时权重是==（0,0,1）如果有一个是（0,1,1）==那后者权重就会高一点

全局配置（app.json）

window节点

navigationBarTitleText

设置导航栏的标题

navigationBarBackgroundColor

设置导航栏的背景颜色

注意修改color的时候必须使用16进制颜色值，eg：#F5B0C8

navigationBarTextStyle

设置导航栏的标题颜色

注意这个参数的可选值只有white和black

enablePullDownRefresh

设置全局下拉刷新功能（默认false）

backgroundColor

设置下拉刷新时的背景颜色

只能是16进制的颜色值

backgroundTextStyle

设置下拉刷新时的loading样式

注意这个参数值只有dark和light，默认是dark

onReachBottomDistance

设置上拉触底的距离

默认触底距离为50px，如果没有特殊需求，保持默认即可

参数值直接写数字即可，不需要带单位

js 复制代码

"onReachBottomDistance": 100

tabBar

tabBar是用于小程序中来快速切换页签的

分为底部和顶部

在顶部时只显示文本不显示图标

页签数量要求为2~5个

图解

示例

pagePath页面的路径（必填项）
text名称（必填项）
iconPath未选中时的图标（选填）
selectedIconPath选中时的图标（选填）

js 复制代码

"window": {},
"tabBar": {
    "list": [
      {
        "pagePath": "pages/list/list",
        "text": "list",
        "iconPath": "/images/tabs/list.png",
        "selectedIconPath": "/images/tabs/list-active.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "index",
        "iconPath": "/images/tabs/index.png",
        "selectedIconPath": "/images/tabs/index-active.png"
      }
    ]
  }

注意：参与tabBar的页面需要在前面配置，否则无效

如图：

页面配置文件

概述

app.json中的配置会对每一个页面都生效，但是如果我们想要让某一个页面拥有特殊的样子，就可以借助于页面的==.json==配置文件，当页面配置文件与全局冲突时，就近原则，以页面配置文件为准

示例

在全局配置文件中，配置的标题栏的背景色为#F5B0C8，如果想要某个页面的不一样，则如下在相应的页面配置文件中配置

原生微信小程序开发笔记

前言

基础知识

组件

view

scroll-view

swiper和swiper-item

swiper容器属性讲解

text

rich-text

button

image

image的mode属性参数讲解

API

概述

数据绑定

事件绑定

bindtap使用演示

在事件处理函数中为data里面的数据赋新值

事件传参

条件渲染

wx:if

结合block使用wx:if

hidden控制元素显示和隐藏

列表渲染

wx:for

wx:key

wxss

rpx

样式导入

全局样式和局部样式

全局配置（app.json）

window节点

navigationBarTitleText

navigationBarBackgroundColor

navigationBarTextStyle

enablePullDownRefresh

backgroundColor

backgroundTextStyle

onReachBottomDistance

tabBar

图解

示例

页面配置文件

概述

示例

配置项与window节点处相同