WeChat学习笔记

WeChat

项目结构

Code

|_ item
	|_ pages		页面文件夹
		|_ index 	首页
			|_ index.js 	逻辑
			|_ index.json 	配置文件
			|_ index.wxml 	主页面
			|_ index.wxss 	样式
		|_ logs		日志
			|_ logs.js	
			|_ logs.json	
			|_ logs.wxml
			|_ logs.wxss
	|_ utils 	第三方的工具
		|_ util.js
	|_ app.js 		全局入口文件
	|_ app.json 	全局配置文件
	|_ app.wxss 	全局样式文件
	|_ project.cofig.json 	项目的配置文件 如appid
	|_ sitemap.json 		微信索引配置文件

微信小程序是可以使用typescript来进行开发的，编写完ts文件时，需要重新点击编译按钮

app.json

pages

pages属性就是配置页面数据

如果需要创建新的页面，只需要在pages对象中新增路劲即可，在微信开发者工具保存之后会自动创建对应的文件

若想让页面成为首页展示的话，只需要把该页面的配置项放到数组的第一个即可

window

window属性就是配置窗口的样式等

比如标题栏，下拉刷新等等

常用属性：

navigationBarBackground 导航条颜色
navigationBarTitle 导航条文字
navigationBarTextStyle 导航条文字颜色

页面配置

在页面中的json中配置，不需要在window对象里配置，直接配置即可

tabBar

底部的路由导航

第一个列表必须是index页面，否则不会显示也不会报错
最少配置两个最多配置五个

sitemap

相当于SEO

样式

在微信小程序中，不需要手动的引入样式文件，系统会帮你自动匹配

单位（rpx）

rpx(responsive pixel)：可以根据屏幕宽度自适应，规定屏幕宽度为750rpx.如在iPhone6，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

公式：屏幕宽度 / 物理像素

单位（vh）

vh就是vh，是css相对视口高度。

公式：1% * 视口高度

选择器

不支持通配符*，其他的都一样

样式导入

样式文件导入样式文件，通过import "path"，只能是相对路劲

小程序基础

常用组件

view：视图标签，相当于div

text：文本标签，所有的文本必须使用text标签包裹起来

image，会有默认宽高320px*240px

src 图片大小不能超过2M
mode 指定图片的缩放，位置等
- scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
- aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
- aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
- widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
- heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
lazy-load 懒加载，当图片在三个屏幕高度内就开始加载

button
- size
- type 控制按钮的颜色
- plain 没有背景色
- open-type
  - getPhoneNumber 获取用户的手机号码，不是企业的小程序账号没有权限来获取用户的手机号码，测试可以
    1. 绑定一个事件bindgetphonenumber
    2. 再事件的回调函数中通过参数来拿到信息
    3. 获取到的信息已经加密过来，需要再小程序后台通过解析来获取真实的数据
  - getUserInfo
    1. 使用方法类似获取用户的手机号码
    2. 可以直接获取不存在在加密的字段
  - openSetting 打开小程序内置的授权页面
    1. 授权页面中只会出现用户曾经点击过的权限
icon
- type
- size
- color
radio-group
radio
- 通过绑定bindchang
checkbox-group
checkbox
navigator 相当于a链接
- url = src
- target
- open-type
  - navigate默认值，保留当前页面，跳转到应用内的某个页面，但不能跳到tabber页面
  - redirect
  - switchTab
rich-text 让小程序使用HTML的标签来做渲染

自定义组件

自定义组件也是通过四个文件组成的

使用组件需要再页面中的json中添加组件的位置

组件写事件的时候需要放在methods对象中

组件传值

父组件向子组件传值

用法跟VUE一样，再子组件需要在JS中的properties接收

Code

getParentData: {
	type: string	// 声明类型
	value: "11"		// 默认值
}

子组件向父组件传值

用法跟VUE一样

Code

父组件：
<childrenComponent bind:getChildData="getChildData" />

子组件：
通过this.tiggerEvent("父方法",传递的值);

数据绑定

跟vue中一样，在页面文件中文件里page方法里的data对象中声明，使用也是用插值表达式

修改数据

跟react中修改数据的方法是一致的，通过this.setData({ data: 11 })

占位符

可通过block标签来包裹，一般做列表渲染用

列表渲染

通过指令wx:for来绑定数据，通过wx:for-item来绑定每一项,通过wx:for-index来帮顶索引值
通过wx:key来指定唯一的标识符
- 可通过循环中的某一项
- 可通过关键字*this表示item本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当一层循环的时候可以不写wx:for-item和wx:for-index，直接用item和index来拿到值

vx:for可以嵌套：

Code

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

对象

当循环的是一个对象的时候，
vx:for-item是对象的value
vx:for-index是对象的key

数组对象

例:

Code

<view wx:for={{list}} wx:for-item="item" wx:for-index="index">
	{{item.name}}
	{{index}}
</view>

条件渲染

if当标签不是频繁切换显示时优先使用
- wx:if
- elif
- else
hidden当标签频繁显示时优先使用

事件绑定

bindtap 点击事件
bindinput 输入框change事件

事件的传参

通过给事件源绑定一个自定义属性data-....等于实参，再通过event来拿到

双向数据绑定

通过bindinput的事件来绑定方法，通过方法的event对象拿到value，再通过this.setData把他赋值给data

常用内置组件

轮播图

html

<swiper class="index-swiper" indicator-dots="true" autoplay="true">
   <swiper-item wx:for="{{swiperItems}}" wx:key="item" wx:for-item="item">
        <image src="{{item}}" class="swiper-image"></image>
	</swiper-item>
</swiper>

swiper是轮播图的容器

swiper-item是轮播图的每一项

常用内置属性

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向

地图组件

支付组件

生命周期

App的生命周期

onLaunch 应用第一次启动时触发
onShow 被用户看到时触发，相当于页面获得焦点
onHide 页面被隐藏时触发，相当于页面失去焦点
onError 应用的代码发生了报错的时候，就会触发
onPaggeNotFound 应用第一次启动时，如果找不到第一个入口页面，则会触发

Page的生命周期

onLoad 监听页面加载
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
onPullDownRefresh 监听用户的下拉动作
onReachBottom 页面下拉触底事件的处理函数
onShareAppMessage 用户点击右上角转发
onPageScroll 页面滚动触发事件的处理函数、
onResize 页面尺寸改变时触发
onTabItemTap 当前是tab页时，点击tab时触发\

component的生命周期

created
attached
ready
moved
detached

路由

底部导航路由

在app.json中配置相对应的跳转页面

"tabBar": {
    "color": "#000000",
    "selectedColor": "#1296db",
    "list": [
        {
            "pagePath": "pages/index/index",
            "text": "倒数日",
            "iconPath": "./src/time.png",
            "selectedIconPath": "./src/timeActive.png"
        },
        {
            "pagePath": "pages/tags/tags",
            "text": "标签",
            "iconPath": "./src/tag.png",
            "selectedIconPath": "./src/tagActive.png"
        }
    ]
},

HTTP请求

通过：

Code

wx.request({
    url: "https://api.apiopen.top/singlePoetry",
    method: "POST",
    success: function(data){
        console.log(data);
    }
})

文件系统

文件系统分为三种

地临时文件：临时产生，随时会被回收的文件。不限制存储大小。、
本地缓存文件：小程序通过接口把本地临时文件缓存后产生的文件，不能自定义目录和文件名。跟本地用户文件共计，普通小程序最多可存储 10MB，游戏类目的小程序最多可存储 50MB。
本地用户文件：小程序通过接口把本地临时文件缓存后产生的文件，允许自定义目录和文件名。跟本地缓存文件共计，普通小程序最多可存储 10MB，游戏类目的小程序最多可存储 50MB。

数据监听

通过observers对象进行监听，一旦监听的数据发生变化会立刻执行预设好的函数

Code

Component({
  data: {
  	numberA: 1,
  	numberB: 2,
  	sum: 0
  },
  observers: {
    'numberA, numberB': function(numberA, numberB) {
      this.setData({
        sum: numberA + numberB
      })
    }
  }
})