微信小程序

起步

与网页开发的区别

运行环境不同

网页运行在浏览器环境，小程序运行在微信环境

api不同

微信小程序无法获取bom dom的api，但可以调用微信的提供的扫码、支付等api

开发模式不同

网页：浏览器+代码编辑器

小程序：申请开发者账号，安装小程序开发者工具，创建项目

注册开发者账号

https://mp.weixin.qq.com/

进入网址，点击注册，选择小程序

注册账号-邮箱验证-登记个人信息

获取小程序appid

登陆https://mp.weixin.qq.com/

开发-开发设置-查看appid （创建小程序需要用到该id）

安装开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

点击工具选项卡

下载最新版本

扫码登录

默认机型为iphone5 建议修改为 iPhone678并调整显示比例

项目基本构成

Snipaste_2022-09-16_16-11-27

新建页面

在app.json 的pages中，新增路径，会自动创建对应的页面文件

调整app.json 的pages的顺序可以修改项目的首页，默认把排第一的渲染为首页 Snipaste_2022-09-16_16-46-51

常用控件

view组件的基本使用

container 是微信开发程序的语义词，去类名要避免使用

=网页布局的div

scroll-view 是可以滚动的view，scroll-x和scroll-y定义横向和纵向滚动

使用时需要给scroll-view添加高度或宽度

1	<scroll-view scroll-x scrool-y></scroll-view>

swiper和swiper-item轮播组件

<swiper indicator-active-color="red" indicator-dots indicator-color="blue">
  <swiper-item>
    <view>1</view>
  </swiper-item>
</swiper>

Snipaste_2022-09-16_17-17-29

常用文本组件

text

长按选中文本效果 
selectabel、user-select都可以实现
<view>
<text selectabel>长安即可选中</text>
</view>

富文本 rich-text

类似v-html，可以解析html标签

1	<rich-text nodes="<h1 style='color:red'> 我能被解析 </h1>></rich-text>

bottom组件

1 2	<bottom mini type='default/warn/primary' plain >11</button> size='mini' 为小尺寸按钮 plain 为镂空按钮

image组件

默认有宽度

mode属性可以指定图片裁剪和缩放 Snipaste_2022-09-16_17-17-29

1	<image src=''></image>

小程序的api

官方把api分为了事件监听api 、同步api、异步api Snipaste_2022-09-16_17-17-29

WXML模板语法

数据绑定

类似vue3，在页面对应的js文件的data中定义即可

插值语法：

不同：

vue绑定数据使用v-bind

小程序直接使用插值语法

//vue3 
:src='date'
//小程序
src='{{ date }}'

事件绑定

常用事件

bindtap语法格式

声明组件
在组件上绑定bindtap函数
去js文件page中定义函数，可以接受一个事件参数对象(e)

this.setData({ })

给data中的数据赋新值

小程序事件传参

无法在定义函数的括号内传参

传过去的参数为 info：2

在函数内使用event.target.dataset.参数名可以拿到传过来的参数·

bindinput

条件渲染

wx：if

类似v-if

搭配 wx：elif wx：else 使用

搭配使用

hidden

hidden也能控制元素的现实和隐藏 hidden='{{}}'

条件为真则隐藏，假则渲染，默认为真

wx:if 和hidden的区别

wx:if是动态移除元素hidden是给元素加样式

类似v-if和v-show

频繁切换时使用hidden，减少性能消耗

列表渲染

wx:for

使用wx:for-item="" wx:for-index=""可以给index和item自定义名字（插值语法的名字） 没卵用

使用wx:key指定唯一key值,提高渲染效率 wx:key='id'

wxss模板样式

具有css的大部分特性，同时还对css进行了扩充和修改

rpx尺寸单位
@import样式引入

rpx 是微信小程序独有，解决屏幕适配问题

样式导入 @import "相对路径";

全局和局部

app.wxss里的样式都是全局样式，可以作用于所有页面

全局样式和局部样式冲突时，优先局部样式，只有全局样式权重大于局部时才会覆盖

全局配置文件

window配置

tabBar

用于多页面切换的功能

tabBar最少两个最多五个
渲染顶部tabBar时，不显示ico，只显示文本

list必填，其中的每一项又有如下配置

tabBar的页面需要在page中放在最前面
tabBar配置样例

网络请求

只能请求https类型的接口

必须将接口添加到信任列表中

发起GET请求

调用wx.request()

发起post请求与get类似，将method改成post即可

跳过request合法域名检验

仅在开发、调试阶段使用

小程序不存在跨域问题

ajax技术核心是依赖于浏览器的XMLHttpRequest，小程序打的宿主环境是微信，不存在ajax请求

生命周期函数

应用的生命周期

页面的生命周期

页面导航

导航到非tabBar时，open-type=“navigate” (默认就是这个，可以省略)

导航传参

声明式传参

编程式传参

onLoad中接收参数

一般会选择在data新建一个数组用于接收参数，在onLoad里面使用setData函数赋值给新数组

页面事件

下拉刷新

json文件的enablePullDownRefresh：true (分为局部和全局)

backgroundColor

backgroundTextStyle

监听下拉刷新事件

js文件onPullDownRefresh

停止下拉刷新

调用 wx.stopPullDownRefresh( )

上拉触底事件

类似实现分页功能，上拉加载更多数据

监听上拉事件

js文件中onReachBottom( ){ } （默认生成）

对上拉触底进行节流处理

添加loading效果

wxs脚本

微信wxs代码可以编写在标签内

wxs应用场景就是过滤器,搭配插值语法使用,不能作为组件的事件回调函数

wxs不能调用js定义的函数，不能使用微信提供的api

基础加强

自定义组件

组件创建

根目录中，创建components文件夹

新建test1文件夹，一个文件夹存放一个组件，这样做结构明了

在test文件夹上右键选择新建component，输入名称后即可生成对应文件

组件使用

局部引用

//在页面的.json文件中
{
  "usingCoponents":{
	"组件名字":"/组件路径"
   }
}

//在页面中
<组件名字></组件名字>

全局引用

在app.json中使用usingComponents，即可在页面直接使用

组件和页面的区别

组件的.json文件中需要声明"component"：true属性

组件的.js文件调用的是"Component()"函数，页面调用的是Page()

组件的处理函数需要写到methods节点中

组件的样式

组件的样式具有样式隔离

不会影响到其他组件的样式和小程序的样式

ps:

app.wxss的全局样式对组件无效

只有class选择器样式隔离效果，id选择器、属性选择器、标签选择器不受影响

在组件和引用组件的页面使用class选择器，不要使用id选择器、属性选择器、标签选择器

自定义组件的数据、方法、属性

数据

组件私有数据定义到data{}中

方法

事件处理函数和自定义方法需要定义到methods:{ }节点

自定义方法命名时可以以下划线_开头，与事件处理函数作区分

属性

properties （一般用于存储外界传过来的数据）

properties和data在本质上没有任何区别,可使用的方法也一样

数据监听器

属性很多时，可以使用obj.**来监听对象中的所有属性

纯数据字段

不会展示在页面上，也不会传递给其他组件的data字段

优点：提高页面的更新性能

使用规则

options：{

pureDataPattern：正则

}

生命周期

小程序的生命周期

小程序生命周期函数的定义

推荐使用lifetimes节点定义

组件所在页面中的生命周期

show()、hide()、 resize()

定义方法

pageLifetimes:{ }

插槽

在wxml结构中，提供一个,用于承载内容

启用多个插槽

使用多个插槽时需要指定名字

//在组件
<slot name="chachao"></slot>

//在页面
<view slot='chachao'></view>

组件通信

属性绑定

事件绑定

步骤

在父组件js中，定义一个函数
在父组件wxml中，通过自定义事件 bind:自定义事件名="函数" 传递给子组件
子组件js中，通过this.triggerEvent('自定义事件名',{参数数组})，将参数传给父组件
父组件的js中，通过调用函数function(e) {e.detail} 获取子组件传过来的数据

获取组件实例

this.selectComponent(.名字或 #名字)

behaviors (类似mixins)

不常用

小程序npm包

不支持node.js内置包、不支持依赖于c++插件的包

能供小程序使用的包不多

Vant Weapp

小程序开发组件库

文档：ttps://vant-contrib.gitee.io/vant-weapp/#/home

在app.wxss中，写入css变量，即可对全局生效

打开官方文档的配置文件，style中可以查看对应的变量名字

/*app.wxss*/
page{
	--button-danger-background-color:#c00000;
	--button-danger-border-color:#c00000;
}
/*page是页面的根节点*/

API Promise化

默认小程序异步api都是基于回调函数实现的，容易造成回调地域，代码可读性、维护性差

api promise化是指通过额外的配置，升级改造为基于promise的异步api

1	npm install --save miniprogram-api-promise

在点击-工具-构建npm之前，先把原先的miniprogram_npm，在重新生成新的miniprogram_npm文件夹，以免避免错误。

在之后使用wx.p来使用promise化的api

全局数据共享（Mobx）

解决组件之间数据共享的问题，相当于vuex

1	npm i --save mobx-miniprogram mobx-miniprogram-bindings

安装完成后删除并重新生成miniprogram_npm文件夹

新建store/store.js

//在store.js中 创建store的实例对象
import {observable,action} from "mobx-miniprogram"
export const store =observable({
    //数据字段  
    //直接定义
    属性1:1,
    shuxing:2,
    //计算属性 get修饰只读
    get 计算属性名(){
        return  结果
    }
    //action方法  修改store数据的值
    方法名字:action(function( 可接受值 ){ })
    
})