微信小程序知识总结【原生微信小程序】

站长

2023年03月11日 18:59 · 阅读数 12

小程序结构目录

小程序基础目录结构
小程序的4层结构

结构传统web 微信小程序
结构 HTML WXML
样式 CSS WXSS
逻辑 Javascript Javascript
配置无 JSON
简洁写法 app.js 和页面 index.js 最简洁的写法分别为：

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	JSON

App({}) 和 Page({})

小程序全局配置和页面配置

小程序配置文件是一种 json 格式的文件，可以起到快速新建页面、指定页面路径、设置导航栏和底部 tabBar 的作用。一个小程序最基本会包括页面配置和全局配置。

全局配置

全局配置 app.json 是当前小程序的全局配置，包括小程序的所有页面路径、界面表现、超时时间、底部 tab 配置。

属性描述
pages 页面路径列表
window 全局的默认窗口表现
tabBar 底部 tab 栏的表现
页面配置

页面配置文件 page.json 只能设置全局配置中关于 window 字段的功能。如设置页面标题、导航栏颜色等。
1. 不用写 window 字段
2. 优先级比全局配置高

属性	描述
pages	页面路径列表
window	全局的默认窗口表现
tabBar	底部 tab 栏的表现

小程序模板语法

数据绑定

数据绑定也称为插值表达式，是一种将变量渲染到页面中的技术。

定义方式

在 index.js 文件当中有一个 Page({}) 配置对象，在里面创建 data 对象属性，里面定义变量。

Page({
  /*** 页面的初始数据*/
  data: {
    msg:'刀',
    index:'myclass',
    isRain: true
  }
})

使用方式

插值表达式完整写法
```
<view>{{msg}}</view>
```
标签属性使用插值表达式
```
<view class="{{index}}">{{msg}}</view>
```

插值表达式三元表达式

<view>{{isRain?'下雨':'晴天'}}</view>

条件渲染

作用：可以动态设置一个标签的显示和隐藏。

Page({
  data: {
    isshow: true,
    ishidden: true
  }
})

wx:if ： wx:if 为真，显示标签；wx:if 为假，隐藏标签。

<view wx:if="{{isshow}}">wx:if为true</view>
<view wx:if="{{!isshow}}">wx:if为false</view>

hidden : hidden 为假，显示标签；hidden 为真，隐藏标签。

<view hidden="{{ishidden}}">hidden为true</view>
<view hidden="{{!ishidden}}">hidden为false</view>

微信小程序知识总结【原生微信小程序】

注意：

使用条件渲染时双引号与双花括号之间不能有空白，否则会以 true 处理。

总结

相同点

wx:if 与 hidden 都是控制结构的显示与隐藏。
不同点
1. wx:if 是通过移除添加结构来实现元素显示与隐藏。
2. hidden 是通过 display 样式来实现显示与隐藏。

列表渲染

列表渲染可以很方便把数组数据渲染到页面中。微信小程序知识总结【原生微信小程序】默认的，index 为每项索引，item 为每项的循环项。

指定索引和每项

wx:for-index ：修改索引的变量值。
wx:for-item ：修改每项循环的变量值。

<view wx:for="{{list}}" wx:for-index="i" wx:for-item="v">{{i}}--{{v}}</view>

循环唯一标识

数组元素会被频繁修改，为了提高小程序重新渲染的效率，可以在渲染每一项时，指定一个唯一标识，方便小程序查找该元素。语法为：

wx:key=""

wx:key 针对不同的数组类型有不同的写法：

普通数组：wx:key="*this" 。

<view wx:for="{{list}}" wx:for-index="i" wx:for-item="v" wx:key="*this">{{i}}--{{v}}</view>

对象数组：wx:key="字符串" 。要有唯一标识的字符串，默认为id。

<view wx:for="{{listObj}}" wx:key="id">{{index}}--{{item.name}}--{{item.age}}</view>

小程序事件绑定

基本使用

小程序绑定事件，是通过 bind 和 catch 关键字来实现的，如 bindtap 和 catchtap 。微信小程序知识总结【原生微信小程序】事件绑定：

Page({
    catchParent() {
      console.log('父亲');
    },
    catchChildren() {
      console.log('孩子');
    }
})

bind ：事件冒泡

<view bindtap="catchParent">父亲
  <view bindtap="catchChildren">孩子</view>
</view>

点击孩子也会触发父亲的事件。

catch ：事件捕获

<view catchtap="catchParent">父亲
  <view catchtap="catchChildren">孩子</view>
</view>

点击孩子不会触发父亲的事件。

事件传参

在微信小程序中，事件传参不能使用普通的 函数名(参数) 的方式传参，控制台会报错。

微信小程序知识总结【原生微信小程序】

报错显示，系统不认识 handeltap(222) 这个函数，显而易见，系统把这整个当作一个函数名了。怎么解决？

在小程序中，传参一般通过自定义属性的方式来获取数据，代码如下：微信小程序知识总结【原生微信小程序】通过获取自定义属性的方式来获取传参的数据。

小程序`data`获取与设置

获取`data`

data: {
    num: 10
},
getData() {
    this.data.num
}

设置`data`

简单数据类型

this.setData({属性名:属性值})

  changeName() {
    this.setData({
      msg: 'dao'
    })
  },

复杂数据类型

如果我们想删除复杂数据类型内某一个属性，可采用下面的代码：
```
  changeObj() {
    this.setData({
      'listObj[0].name' : 'daodao'
    })
  },
```

小程序样式

全局样式和页面样式

后缀名为 wxss 。
分类
- 全局样式：app.wxss
  
  全局样式设置了之后每个页面都会生效。
- 页面样式：页面.wxss
  
  页面样式设置了之后单个页面会生效，且会覆盖全局样式中一致的样式。

新的单位`rpx`

规定：不管屏幕多少 px ，换算成 rpx 单位统一 750rpx 。

其中，rem 是网页 html 的单位，不能使用，但可以使用 vw 。

注意：

不能使用 rem 作为单位。

不支持通配符 * 。

小程序内置组件

image

图片标签，默认大小为 320 * 240。

可通过 mode 属性控制渲染效果，具体参数看文档。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，直到图片某一边碰到边界。
缩放	aspectFill	保持纵横比缩放图片，直到图片完全铺满边界。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变

可设置图片懒加载。

swiper

轮播图标签，默认宽高为 100% * 150px。轮播图属性如下：

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
autoplay	Boolean	false	是否自动切换
circular	Boolean	false	是否衔接轮播

注意：

轮播图 swiper 组件内必须设置 swiper-item 标签，用这个标签包裹其他需要的标签，不然无法生效。

swiper 与 image 相结合：由于两者高度不统一，因此结合使用时需要我们去微调两者的高度，以便达到和谐的效果。

navigator

导航标签，类似于超链接 a 标签，是一个块级元素。

用 url 指定要跳转到的当前小程序的页面。

想要设置 url ，必须跟上设置对应的 open-type 才能有对应的效果。

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。

注意：

跟 app.json 文件的 pages路径配置不一样，需要在前面加 / 。

用 target 指定要跳转到的其他小程序。

想要设置跳转到其他小程序，要设置 target="miniProgram" ，然后填写 short-link 或者 app-id 属性。

button

值	说明
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
share	触发用户转发
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

rich-text

内置的富文本标签，通过传入 nodes 来使用。

data: {
  news: '<h1>刀刀新闻</h1> <hr/> <div>大新闻！大新闻！</div>'
}

<view>
  <rich-text user-select nodes="{{news}}"></rich-text>
</view>

根据接口文档，设置一个 user-select 属性可让用户复制文本。

text

相当于 web 的 span 标签，行内元素。

view

相当于 web 的 div 标签，块级元素。

radio

单选框标签，通过 radio-group 包裹 radio 单选框标签实现布局。

radio-group ：有内置方法 bindchange ，radio-group 中选中项发生改变时触发 change 事件，通过 e.detail.value 获取。
radio ：通过绑定 value 属性实现。

<radio-group bind:change="handlerChange">
  <view wx:for="{{myradio}}" wx:key="value">
    <radio value="{{item.value}}">{{item.name}}</radio>
  </view>
</radio-group>

handlerChange(e) {
  console.log(e);
}

checkbox

多选框标签，通过 checkbox-group 包裹 checkbox 单选框标签实现布局。

最外层用 checkbox-group 包裹，checkbox 本身定义 value 值，每当改变选择，最新被选择的 value 组成数组自动传入外层的 checkbox-group 标签的 change 事件参数中。

<checkbox-group bind:change="checkChange">
  <view wx:for="{{myradio}}" wx:key="value">
    <checkbox value="{{item.value}}" disabled="{{item.like? true:false}}">{{item.name}}</checkbox>
  </view>
</checkbox-group>

通过 disabled 设置禁用属性。

小程序自定义组件

自定义组件

创建：创建一个文件夹 components 存储所有自定义组件，在这个文件夹中创建自定义组件的文件夹。

在组件的 wxml 文件中写结构，图片路径写自己的路径。
注册：在需要使用组件的文件的 json 文件中引入注册，注意路径问题。
使用：在该页面中引入。

父传子传递数据

父组件传递数据

父组件的数据：

img: [
  '../img/万叶.jpg',
  '../img/甘雨.jpg',
  '../img/魈.jpg'
]

父组件的结构：

<border-image wx:for="{{img}}" wx:key="*this" imageUrl="{{item}}"></border-image>

子组件接收数据

在子组件的 js 文件中，接收数据。由于一开始子组件注册成为 components ，因此会有一个 properties 对象，相当于 props ，在这之中设置数据类型接收数据。
```
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    imageUrl: {
      type: String,
      value: ''
    }
  }
})
```
子组件使用数据
```
<image src="{{imageUrl}}"></image>
```

子传父传递数据

为子组件绑定点击事件

<image bind:tap="getUrl" src="{{imageUrl}}"></image>

在子组件的 methods 中接收声明子传父的自定义事件，并把数据传递过去

methods: {
    getUrl() {
      this.triggerEvent('srcChange', this.properties.imageUrl)
      // console.log(this.properties.imageUrl);
    }
  }

在父组件中为子组件绑定自定义事件

<border-image bind:srcChange="showUrl" wx:for="{{img}}" wx:key="*this" imageUrl="{{item}}"></border-image>

在父组件的 js 文件中声明事件，用事件对象 e 来接收数据
```
showUrl(e) {
  console.log(e.detail);
}
```

小程序生命周期

应用生命周期

属性	说明
onLaunch	生命周期回调——监听小程序初始化。
onShow	生命周期回调——监听小程序启动或切前台。
onHide	生命周期回调——监听小程序切后台。
onError	错误监听函数。
onThemeChange	监听系统主题变化

页面生命周期

属性	说明
onLoad	生命周期回调—监听页面加载
onShow	生命周期回调—监听页面显示
onReady	生命周期回调—监听页面初次渲染完成
onHide	生命周期回调—监听页面隐藏
onUnload	生命周期回调—监听页面卸载
onPullDownRefresh	监听用户下拉动作
onReachBottom	页面上拉触底事件的处理函数
onShareAppMessage	用户点击右上角转发
onShareTimeline	用户点击右上角转发到朋友圈
onAddToFavorites	用户点击右上角收藏
onPageScroll	页面滚动触发事件的处理函数
onResize	页面尺寸改变时触发，详见响应显示区域变化

组件生命周期

微信小程序知识总结【原生微信小程序】

小程序的api

弹出警示框

wx.showToast({
  title: 'success~',
})

发送网络请求

onLoad(options) {
  wx.request({
    url: 'https://cnodejs.org/api',
    success(res) {
      console.log(res);
    },
    fail(err) {
      console.log(err);
    }
  })
},

微信小程序 知识总结【原生微信小程序】

小程序结构目录

小程序全局配置和页面配置

小程序模板语法

数据绑定

条件渲染

总结

列表渲染

指定索引和每项

循环唯一标识

小程序事件绑定

基本使用

事件传参

小程序data获取与设置

获取data

设置data

小程序样式

全局样式和页面样式

新的单位rpx

小程序内置组件

image

swiper

navigator

button

rich-text

text

view

radio

checkbox

小程序自定义组件

自定义组件

父传子传递数据

子传父传递数据

小程序生命周期

应用生命周期

页面生命周期

组件生命周期

小程序的api

弹出警示框

发送网络请求

微信小程序知识总结【原生微信小程序】

小程序`data`获取与设置

获取`data`

设置`data`

新的单位`rpx`