12微信小程序

步骤

过程

1

百度搜索：微信公众平台【https://mp.weixin.qq.com/】

2

进入微信公众平台的官网，找到小程序

3

点击小程序文档就ok

步骤

过程

1

注册【在微信公众平台注册小程序账号，完成注册后同步进行信息完善和开发】

2

小程序信息完善

3

开发小程序

4

提交审核和发布

文件或文件名

描述

pages

用来存放所有小程序的页面

app.js

小程序项目的入口文件

app.json

小程序项目的全局配置文件

app.wxss

小程序项目的全局样式文件

project.config.json

小程序项目的配置文件

project.private.config.json

小程序项目的私有配置文件【优先级高于project.config.json】

sitmap.json

用来配置小程序及其页面是否允许被微信索引

步骤

过程

1

下载微信开发者工具，得到安装包

2

双击安装包，直接使用默认安装路径

步骤

过程

1

设置->代理->选中“不使用任何代理，勾选后直连网络”

组件名称

描述

view

相当于html中的div块级元素

hidden属性控制view组件的显示与隐藏

text

相当于html中的span标签

rich-text

<rich-text nodes=”<h3>我是h3标题</h3>”></rich-text>

可以解析nodes属性值里面的标签结构

image

图片组件

<image src=”图片路径/图片名.后缀名” mode=”图片裁剪、缩放模式”

mode属性控制图片的显示方式

navigator

传送门组件，跳转到其他页面

不携带参数的页面跳转

<navigator url=”跳转路径/index”>提示内容</navigator>

携带参数的页面跳转

<navigator url=”跳转路径/index?参数名1=值1&参数名2=值2”>提示内容</navigator>

目标页面上js获取传参

Page({

…,

onl oad(options){

//参数保存的就是传递的所有参数对象。

}

})

button

按钮组件

input

小程序中input输入框默认没有边框

swiper

轮播图组件

Swiper有自己默认的高度为150px，如果内容超出高度，那么将来只会显示150【给swiper添加类名，重新设置高度】

整个轮播图的属性

指示点【轮播图的小圆点】：indicator-dots【属性值为布尔值true或false】

自动轮播：autoplay【属性值为布尔值true或false】

轮播间隙：interval【属性值为毫秒数】

动画时长：duration【属性值为毫秒数】

衔接动画：circular【属性值为布尔值true或false】

<swiper class=”类名” autoplay=”true”>

<swiper-item>

第一张轮播内容

</swiper-item>

<swiper-item>

第二张轮播内容

</swiper-item>

…

</swiper>

属性值

描述

scaleToFill

aspectFit

在图片不失帧【保持横纵比缩放】的情况下，使图片刚好可以放入盒子中。

aspectFill

widthFix

heightFix

事件类型

描述

bindtap

【bind:tap】手指点触摸后触发对应事件【类似于原生的click事件】

bindinput

【bind:input】文本框中输入事件

bindchange

【bind:change】状态改变时触发

语法

描述

<组件名

bindtap=”事件处理函数名” >

</组件名

事件处理函数在目标页面.js文件中可以看到

语法

描述

<input

bindinput=”目标事件名”

model:value=”{{绑定值}}”

/>

当我们在输入框中输入内容时就会触发目标事件名的执行

model属性用于双向绑定数据【使用了model双向绑定一定需要有bindinput事件类型，否则会报黄。】

语法

描述

目标事件名(e){

}

e.detail.value可以获取输入框中的内容

如果使用了双向数据绑定，this.data.value也可以获取到输入框的内容

语法

描述

<swiper

indicator-dots="true"

autoplay="true"

interval="1000"

duration="1000"

circular="true"

>

<swiper-item>

//内嵌结构

</swiper-item>

<swiper-item>

//内嵌结构

</swiper-item>

</swiper>

swiper组件内嵌多少个swiper-item组件，轮播图就有多少项

indicator-dots属性值为布尔值，用于控制是否显示小圆点

autoplay属性值为布尔值，用于控制是否开启自动轮播

interval属性值为数字，表示多少毫秒展示下一张【轮播间隔】

duration属性值为数字，表示内容平滑切换用多少时间【动画时长】

circular属性值为布尔值，表示是否衔接动画【播放完最后一张后，继续向后连续播放第一张】

语法

描述

<navigator url=”/页面路径”>

超链接内容

</navigator>

点击超链接内容,就会跳转到url指定的页面路径上

url指定的页面路径可用/开头;也可以相对路径

语法

描述

<navigator url =

”/页面路径

?key1=value1&key2=value2”

>

超链接内容

</navigator>

点击超链接内容，就会跳转到url指定的页面路径上

url指定的页面路径可用/开头，也可相对路径

?后面的是页面参数

页面参数会被生命周期函数onLoad的第一个参数以对象的形式接收

语法

描述

<button bindtap=”目标事件名”>按钮内容</button>

点击目标页面按钮内容，触发目标页面.js文件中的目标事件

语法

描述

wx.navigateTo({

url: '/页面路径',

})

在目标事件中写这个代码就可以跳转到指定页面。

语法

描述

wx.navigateTo({

url: '/页面路径?参数名1=值1 & 参数名2=值2'

})

在目标事件中写这个代码就可以跳转到指定页面。

语法

描述

<组件名

data-自定义参数名=值

bindtap=”目标事件名”

>内容</组件名>

传递的参数会通过事件对象的方式保存在事件的第一个参数中【事件对象】

目标事件中可以使用第一个参数.currentTarget.dataset.自定参数名来获取到绑定事件的组件上传递的参数。

目标事件中可以使用第一个参数.target.dataset.自定参数名来获取到被点击的元素上传递的参数。

鉴于不同设备屏幕的大小不同，未来实现屏幕的自动适配

rpx把所有设备的屏幕在宽度上等分为750份

当小程序运行在不同设备上时，会自动将rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配

与rem的作用是一样的【rem需要我们自己去配置，rpx小程序以及配置完成】

模块的导出【暴露】语法

模块的导入语法

module.exports={}

const 变量名=require(‘文件路径’)

模块的默认导出语法

模块对应的默认导入语法

export defaut 暴露的值

import 自定义导入接收名 from “暴露变量的文件路径/暴露变量的文件名.js”

模块的按需导出语法

模块对应的默认导入语法

export var 变量名=值

import {按需导入的变量名} from “暴露变量的文件路径/暴露变量的文件名.js”

微信登陆微信公众平台->点击头像处的昵称->在基本信息里面可以看到小程序码

登陆微信开发者工具并打开项目 -> 点击工具栏右侧的“详情” -> 修改发布的AppId ->点击工具栏右侧的上传

微信扫码登陆微信公众平台【选择上传项目的appid号】 -> 管理 ->”版本管理” -> 多出来的“开发版本”点击“提交审核” -> 审核通过后在“审核版本”点击“提交发布”

微信扫码登陆微信公众平台【选择上传项目的appid号】-> 点击右侧“头像“-> 点击“昵称”-> 基本设置的“小程序码及线下物料下载” 右侧下载

配置项

描述

pages

记录当前小程序所有页面的存放路径【pages里面存放的路径可能是tabbar配置中list数组对象的单个数组项对象的pagePath属性对应的属性值】

window

全局设置小程序窗口的外观

tabBar

设置小程序底部的tabBar效果

tabBar是移动端应用的视觉效果，用于实现多页面的快速切换

tabBar中只能配置最少2个，最多5个tab页

语法如下【配置项必须是tabBar,属性必须是list数组，数组中保存着所有tabBar路径信息和文字信息】【path相关的路径不能以/开头】

"tabBar": {

        "list": [

            {

                "pagePath": "pages/tabbar01demo/index",

                "text": "首页"

            },

            {

                "pagePath": "pages/tabbar02demo/index",

                "text": "我的"

            }

        ]

}

style

是否启用新版本的组件样式

属性

描述

navigationBarBackgroundColor

导航栏背景颜色【只能是十六进制】

navigationBarTitleText

导航栏标题文字内容

navigationBarTextStyle

导航栏标题颜色，仅支持black/white

enablePullDownRefresh

是否开启全局的下拉刷新【开启后可以将页面内容盒子往下移动，且出现的间隙会出现加载图标动画，而且会有窗口背景色】

backgroundColor

下拉刷新时多出的窗口的背景色

backgroundTextStyle

导航栏下拉刷新小圆点颜色【只能是black黑色或white白色】

语法

描述

"tabBar": {

"list": [{

"pagePath": "pages/home/index",

"text": "第一个",

"iconPath": "/图片路径1",

"selectedIconPath": "/图片路径2"

},

{

"pagePath": "pages/tabbar/index",

"text": "第二个",

"iconPath": "/图片路径1",

"selectedIconPath": "/图片路径2"

},

…]

}

tabBar页面的导航按钮，根据list数组的数组项顺序从左到右排列，所以需要根据tabBar手动配置

tabBar配置页面路径不能以/开头

iconPatc属性配置tabBar没被选中时显示的图片

selectedIconPatc属性配置tabBar被选中时显示的图片

tabBar只能被选中一个

语法

描述

<navigator url=’/普通页面路径’></navigator>

可以使用../【相对路径】的方式一层一层的找对应普通页面路径，也可以使用/开头写页面路径【绝对路径】

语法

描述

wx.navigatorTo({url:’普通页面路径/普通页面文件名’})

可以使用../【相对路径】的方式一层一层的找对应普通页面路径，也可以使用/开头写页面路径【绝对路径】

语法

描述

<navigator open-type=”switchTab” url=’/普通页面路径’></navigator>

可以使用../【相对路径】的方式一层一层的找对应普通页面路径，也可以使用/开头写页面路径【绝对路径】

语法

描述

wx.switchTab({

url:’tabBar页面路径’

})

可以使用../【相对路径】的方式一层一层的找对应普通页面路径，也可以使用/开头写页面路径【绝对路径】

登陆微信公众平台->”开发”->”开发管理”->”开发设置”->”服务器域名”->点击”修改”->微信扫码身份验证->request合法域名输入框粘贴域名

语法

描述

wx.request({

url:’服务器地址’,

method:”GET”,

data:{

name:’lwt’,

age: 24

},

success:(res)=>{}

})

data属性后面的是传递的参数

success函数的第一个参数是请求成功返回的数据。

语法

描述

wx.request({

url:’服务器地址’,

method:”POST”,

data:{

name:’lwt’,

age: 24

},

success:(res)=>{}

})

data属性后面的是传递的参数

success函数的第一个参数是请求成功返回的数据。

语法

描述

wx.showLoading({

title:’提示文本’

})

显示加载提示框，一般用于发送请求前

语法

描述

wx.hideLoading({

noConflict: true,

success: (res) => { },

fail: (res) => { },

complete: (res) => { },

})

隐藏加载提示框，一般用于发送请求完成的complete函数中。

wx.request({

…,

complete:() =>{this.hideLoading()}

})

语法

描述

"window": {

…,

"enablePullDownRefresh": true

}

开启每个页面的下拉刷新

语法

描述

{

…,

"enablePullDownRefresh": true

}

这是目标页面.json的代码，这个文件只能设置window配置，所以不用加window属性，也不能加window属性

语法

描述

"window": {

...,

"onReachBottomDistance": 数字

}

当屏幕重触顶开始向下拉，当下拉到离底部还剩下的距离小于下拉触底设置的值时，就会触发下拉触底的钩子onReachBottom【每次经过那个临界点都会触发】

语法

描述

{

"onReachBottomDistance": 数字

}

当下拉到离底部的距离还剩设定数字时，就会触发下拉触底的生命周期钩子onReachBottom

语法

描述

目标方法名(){

wx.request({

url:’请求地址’,

data:参数键值对象,

success:res=>{

this.setData({

数据源变量:[

…this.data.数据源变量,

…res.data.data

]

})

}

})

}

微信小程序中扩充原先数据的方法

应用生命周期函数

描述

onLaunch

当小程序初始化完成时，会触发onLaunch【全局只触发一次】【可以用于统计小程序的访问量】

onShow

当小程序启动，或从后台进入前台显示，会触发onShow

onHide

当小程序从前台进入后台，会触发onHide

应用生命周期函数

描述

onLoad

监听页面加载，一个页面只调用一次【第一次打开目标页面才会执行】【常用于初始化数据】

onShow

监听页面显示【每次显示都会执行】

onReady

监听页面初次渲染完成【一个页面只调用一次】

onHide

监听页面隐藏【当前页面使用navigatorTo跳转会触发当前页面的onHide钩子；点击当前页面右上角的圆圈会进入小程序后台，同样会触发onHide钩子。】

onunload

监听页面卸载

onPullDownRefresh

当前页面设置了下拉刷新配置，就会触发该钩子的执行

onReachBottom

当前页面设置了上拉触底配置，当上拉到触底还剩设定值时就会触发该钩子的执行。【每次上拉到触底还剩设定的数字px像素时都会触发该钩子的执行】

区别

描述

wxs有自己的数据类型

Number,string,boolean,object,function,array,date,regexp

wxs不支持类似于ES6及以上的语法形式

不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写…

支持var定义变量、普通function函数等类似于ES5的语法

wxs遵循CommonJs规范

模块导出：module.exports={}

模块导入：var xx=require()

语法

描述

<wxs module=”自定义模块名”>

function 自定义方法名(v){

return v.split(“”).reverse().join()

}

//暴露方法

module.exports={

自定义使用方法名：自定义方法名

}

</wxs>

自定义方法的参数v表示数据源

常用于过滤操作。

Wxml中使用该方法使用：

{{自定义模块名.自定义使用方法名(数据源变量)}}

function 自定义方法名(v){

return v.split(“”).reverse().join()

}

//暴露方法

module.exports={

自定义使用方法名：自定义方法名

}

<wxs module=”自定义模块名” src=”/wxs/index.wxs”></wxs>

{{自定义模块名.自定义方法名(数据源变量)}}

语法

描述

onLoad(options){

let name = options.参数名

wx.setNavigationBarTitle({

title:name

})

}

onLoad生命周期函数的第一个参数是参数对象，里面存放着我们传递过来的参数列表

语法

描述

wx.stopPullDownRefresh()

通常下拉时会重新发请求获取数据

获取到数据我们就需要立刻关闭下拉刷新的面板，给用户更好的体验

wx.request({

url:’请求地址’,

method:’GET’，

data:{数据参数列表},

success:(res)=>{

this.setData({

数据源变量:res的表达式新值

})

},

complete:()=>{

…,

wx.stopPullDownRefresh()

}

})

步骤

过程

1

在项目根目录中，创建一个文件夹：components

2

在components中创建一个文件夹：text

3

在test中，右键，新建component

4

文件夹中会自动生成四个文件，后缀名分别为.js、.json、.wxml和.wxss

语法

描述

{

"usingComponents": {

"自定义使用组件名": "/组件路径"

},

…

}

以后在目标页面需要使用该组件时，只需要在目标页面.wxml对应的位置写<自定义使用组件名></自定义组件名>

语法

描述

{

"usingComponents": {

"自定义使用组件名": "/组件路径"

},

…

}

以后在目标页面需要使用该组件时，只需要在目标页面.wxml对应的位置写<自定义使用组件名></自定义组件名>

语法

描述

Component({

options:{

styleIsolation: "apply-shared"

},

…

})

在自定义组件的js文件中添加options配置的styleIsolation: 'apply-shared' 就可以让外界页面的样式能够控制组件内部的样式,但自定义组件中指定的样式不会影响页面。

styleIsolation: 'isolated'；默认值。表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会相互影响

styleIsolation: 'isolated'；表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件。

语法

描述

<自定义组件名 目标暴露属性:暴露值></自定义组件名

使用自定义组件的时候将页面的数据通过属性暴露给自定义组件内部使用

Component({

/**

* 组件的属性列表

*/

properties: {

目标暴露属性：{

type:String, //数据的类型

value:’默认值’

}

},

语法

描述

{{目标暴露属性}}

和自己的普通属性一样使用

语法

描述

observers:{

“侦听属性1,侦听属性2,…”：function(newValue1,newValue2,…){

}

}

observers配置属性和data属性同级

当自定义组件中侦听属性发生改变时会触发侦听属性后面的函数,函数的参数对应侦听属性改变后的新值

语法

描述

observers:{

“侦听对象.属性1,侦听对象.属性2,…”：function(newValue1,newValue2,…){

}

}

observers配置属性和data属性同级

当自定义组件中侦听对象的属性发生改变时会触发侦听属性后面的函数,函数的参数对应侦听属性改变后的新值

语法

描述

observers:{

"侦听对象.**"：function(newValue1,newValue2,…){

this.setData({

重新渲染变量：表达式

})

}

}

observers配置属性和data属性同级

当自定义组件中侦听对象的属性发生改变时会触发侦听属性后面的函数,函数的参数对应侦听属性改变后的新值

语法

描述

Component({

options: {

pureDataPattern: /^_/

},

…

})

设置了这个属性后，以后以_开头的变量都是纯数据变量，纯数据变量只能在逻辑中使用，在页面上无法渲染

生命周期钩子

描述

created

在组件实例刚刚被创建时执行【相当于vue中的beforeCreated钩子】

此时还不能调用setData

通过在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性字段

attached

在组件实例进入页面节点树时执行【相当于vue中的created钩子】

此时this.data已经被初始化完毕

这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行

ready

在组件在视图层布局完成后执行

moved

在组件实例被移动到节点树另一个位置时执行

detached

在组件实例被页面节点树移除时执行【redirectTo跳转到另一个页面触发,相当于vue中的destroyed钩子】

退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数

此时适合做一些清理性质的工作

error

每当组件方法抛出错误时执行

Component({

…,

lifetimes: {

attached() {

},

detached() {

}

}

})

生命周期函数

描述

show

组件所在的页面被展示时执行

hide

组件所在的页面被隐藏时执行

resize

组件所在的页面尺寸变化时执行

Component({

...,

pageLifetimes: {

show() {

console.log('页面显示，导致组件显示')

},

hide() {

console.log('页面隐藏，导致组件隐藏')

},

resize() {

console.log('页面尺寸发生改变，导致组件尺寸改变')

}

}

})

<slot></slot>

<自定义组件>

插槽处填充html内容

</自定义组件>

Component({

options: {

multipleSlots: true

},

...

})

<slot name=”插槽名”></slot>

<自定义使用组件>

<view slot=”对应插槽名”>填充内容</view>

</自定义使用组件>

Page({

data: {

数据变量:普通类型值

},

...

}

<自定义使用组件 暴露属性=”{{页面数据变量}}”></自定义使用组件

Component({

properties: {

接收暴露属性 :{

type: String

}

},

...

})

this.triggerEvent(“自定义事件名”,this.data.自定义组件内部属性)

<自定义组件 bind自定义事件名=”页面方法名”></自定义组件>

<自定义组件 选择器类型=”自定义组件选择器名”></自定义组件>

let 自定义获取到的组件对象名=this.selectComponent(‘选择器类型选择器名’)

export default Behavior({

data:{

共享属性：值

},

methods:{

共享方法(){}

}

})

import 自定义behaviors接收对象 from “共享属性和方法的文件相对路径”

Component({

behaviors:[自定义behaviors接收对象]

})

Component({

…,

methods:{

方法名（）{

this.共享方法名()

}

}

})