小程序：微信小程序开发

最新推荐文章于 2024-09-20 13:21:53 发布

2401_84152126

最新推荐文章于 2024-09-20 13:21:53 发布

阅读量1.5k

点赞数 5

分类专栏：程序员文章标签：小程序微信小程序

本文链接：https://blog.csdn.net/2401_84152126/article/details/138614570

版权

程序员专栏收录该内容

190 篇文章 0 订阅

订阅专栏

Page({

data: {

array: [{

id:0,

message: ‘foo’,

}, {

id:1,

message: ‘bar’

}]

}

})

7.3.2. block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

{{index}}:

7.4. 条件渲染

7.4.1. wx:if

在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

7.4.2. hidden

True

类似 wx:if

频繁切换用 hidden

不常使用用 wx:if

8. 小程序的事件绑定

=======================================================================

⼩程序中绑定事件，通过bind关键字来实现。如bindtap、bindinput、bindchange等不同的组件⽀持不同的事件，具体看组件的说明即可。

8.1. wxml

绑定事件

8.2. page

通过事件源对象可以获取输入框的值—e.detail.value

Page({

// 绑定的事件

handleInput: function(e) {

console.log(e);

console.log(“值被改变了”);

}

})

8.3. 特别注意

handleInput: function(e) {

// {item:100}

console.log(e.currentTarget.dataset)

// 输入框的值

console.log(e.detail.value);

}

9. 样式WXSS

==================================================================================================================================================

WXSS( WWeeiiXXiinn SSttyyllee SShheeeettss )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。与 CSS 相⽐，WXSS 扩展的特性有：

响应式⻓度单位 rpx
样式导⼊

9.1. 尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为750rpx。如在iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 785px = 750物理像素

即：1rpx = 0.5px= 1物理像素

| 设备 | rpx换算px(屏幕宽度/750) | px换算rpx(750/屏幕宽度) |

| — | — | — |

| iPhone5 | 1rpx=0.42px | 1px=2.34rpx |

| iPhone6 | 1rpx=0.5px | 1px=2rpx |

| iPhone6 Plus | 1rpx=0.552px | 1px=1.81rpx |

建议：开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。

使⽤步骤：

确定设计稿宽度pageWidth
计算⽐例750rpx = pageWidth px,因此 1px = 750rpx/pageWidth
在less⽂件中，只要把设计稿中的px=>750/pageWidth rpx即可。

9.2. 样式导入

wxss中直接就⽀持，样式导⼊功能。

也可以和 less中的导⼊混⽤。

使⽤@import语句可以导⼊外联样式表，只⽀持相对路径。

⽰例代码：

/** common.wxss **/

.small-p {

padding:5px;

}

/** app.wxss **/

@import “common.wxss”;

.middle-p {

padding:15px;

}

9.3. 选择器

特别需要注意的是⼩程序不⽀持通配符 * 因此以下代码⽆效！

margin:0;

padding:0;

box-sizing:border-box;

}

⽬前⽀持的选择器有：

| 选择器 | 样例 | 样例描述 |

| — | — | — |

| .class | .intro | 选择所有拥有 class=“intro” 的组件 |

| #id | #firstname | 选择拥有 id="firstname"的组件 |

| element | view | 选择所有 view 组件 |

| element,element | view,checkbox | 选择所有⽂档的 view 组件和所有的 checkbox 组件 |

| nth-child(n) | view:nth-child(n) | 选择某个索引的标签 |

| ::after | view::after | 在 view 组件后边插⼊内容 |

| ::before | view::before | 在 view 组件前边插⼊内容 |

9.4. 小程序中使用less

原⽣⼩程序不⽀持less，其他基于⼩程序的框架⼤体都⽀持，如wepy， mpvue， taro等。但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现

编辑器是 vs code
安装插件 easy less

在这里插入图片描述

在vs code的设置中加⼊如下，配置

在这里插入图片描述

在要编写样式的地⽅，新建 lexx⽂件，如 index.lese然后正常编辑即可。

10. 常见组件

===================================================================================================================================

重点讲解⼩程序中常⽤的布局组件view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox。等

10.1. view

代替原来的 div 标签

点击我试试

10.2. text

⽂本标签
只能嵌套text
⻓按⽂字可以复制（只有该标签有这个功能）
可以对空格回⻋进⾏编码

| 属性名 | 类型 | 默认值 | 说明 |

| — | — | — | — |

10.2.1 代码

普通

10.3. image

图⽚标签，image组件默认宽度320px、⾼度240px
⽀持懒加载

| 属性名 | 类型 | 默认值 | 说明 |

| — | — | — | — |

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

| 模式 | 值 | 说明 |

| — | — | — |

| 缩放 | scaleToFill | 不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满 image 元素 |

| 缩放 | aspectFit | 保持纵横⽐缩放图⽚，使图⽚的⻓边能完全显⽰出来。 |

| 缩放 | aspectFill | 保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。 |

| 缩放 | widthFix | 宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变 |

| 裁剪 | top | 不缩放图⽚，只显⽰图⽚的顶部区域 |

| 裁剪 | bottom | 不缩放图⽚，只显⽰图⽚的底部区域 |

| 裁剪 | center | 不缩放图⽚，只显⽰图⽚的中间区域 |

| 裁剪 | left | 不缩放图⽚，只显⽰图⽚的左边区域 |

| 裁剪 | right | 不缩放图⽚，只显⽰图⽚的右边区域 |

| 裁剪 | top left | 不缩放图⽚，只显⽰图⽚的左上边区域 |

| 裁剪 | top right | 不缩放图⽚，只显⽰图⽚的右上边区域 |

| 裁剪 | bottom left | 不缩放图⽚，只显⽰图⽚的左下边区域 |

| 裁剪 | bottom right | 不缩放图⽚，只显⽰图⽚的右下边区域 |

10.4. swiper

微信内置轮播图组件

在这里插入图片描述

默认宽度 100% ⾼度 150px

| 属性名 | 类型 | 默认值 | 说明 |

| — | — | — | — |

10.4.1. swiper

滑块视图容器。

10.4.2. swiper-item

滑块

默认宽度和⾼度都是100%

10.5. navigator

导航组件类似超链接标签

| 属性名 | 类型 | 默认值 | 说明 |

| — | — | — | — |

open-type 有效值：

| 值 | 说明 |

| — | — |

| navigate | 保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到 tabbar ⻚⾯ |

| redirect | 关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到 tabbar ⻚⾯。 |

| switchTab | 跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯ |

| reLaunch | 关闭所有⻚⾯，打开到应⽤内的某个⻚⾯ |

| navigateBack | 关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当前的⻚⾯栈，决定需要返回⼏层 |

| exit | 退出⼩程序，target="miniProgram"时⽣效 |

10.6 rich-text

富文本标签

可以将字符串解析成对应标签，类似 vue中 v-html 功能

在这里插入图片描述

代码

// 1 index.wxml 加载节点数组

// 2 加载字符串

<rich-text nodes='<img

src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p

ng" alt=“”>'>

// index.js

Page({

data: {

nodes: [{

name: ‘div’,

attrs: {

class: ‘div_class’,

style: ‘line-height: 60px; color: red;’

children: [{

type: ‘text’,

text: ‘Hello World!’

}]

tap() {

console.log(‘tap’)

}

})

10.6.1. nodes属性

nodes 属性⽀持 字符串 和 标签节点数组

| 属性 | 说明 | 类型 | 必填 | 备注 |

| — | — | — | — | — |

⽂本节点：type = text

| 属性 | 说明 | 类型 | 必填 | 备注 |

| — | — | — | — | — |

nodes不推荐使⽤ String 类型，性能会有所下降。
rich-text 组件内屏蔽所有节点的事件。
attrs 属性不⽀持 id ，⽀持 class 。
name 属性⼤⼩写不敏感。
如果使⽤了不受信任的 HTML 节点，该节点及其所有⼦节点将会被移除。
img 标签仅⽀持⽹络图⽚。

10.7 button

在这里插入图片描述

<button

type=“default”

size=“{{defaultSize}}”

loading=“{{loading}}”

plain=“{{plain}}”

default

| 属性 | 类型 | 默认值 | 必填 | 说明 |

| — | — | — | — | — |

size 的合法值

| 值 | 说明 |

| — | — |

default 默认⼤⼩

mini ⼩尺⼨

type 的合法值

| 值 | 说明 |

| — | — |

| primary | 绿⾊ |

| default | ⽩⾊ |

| warn | 红⾊ |

form-type 的合法值

| 值 | 说明 |

| — | — |

| submit | 提交表单 |

| reset | 重置表单 |

open-type 的合法值

| 值 | 说明 |

| — | — |

| contact | 打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从bindcontact 回调中获得具体信息，具体说明 |

| share | 触发⽤⼾转发，使⽤前建议先阅读使⽤指引 |

| getPhoneNumber | 获取⽤⼾⼿机号，可以从bindgetphonenumber回调中获取到⽤⼾信息，具体说明 |

| getUserInfo | 获取⽤⼾信息，可以从bindgetuserinfo回调中获取到⽤⼾信息 |

| launchApp | 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明 |

| openSetting | 打开授权设置⻚ |

| feedback | 打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传⽇志，开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容 |

open-type 的 contact的实现流程

将⼩程序的appid由测试号改为⾃⼰的appid
登录微信⼩程序官⽹，添加客服 – 微信
为了⽅便演⽰，⾃⼰准备了两个账号
普通⽤⼾ A
客服-微信 B
就是⼲！

10.8. icon

| 属性 | 类型 | 默认值 | 必填 | 说明 |

| — | — | — | — | — |

在这里插入图片描述

代码

Page({

data: {

iconSize: [20, 30, 40, 50, 60, 70],

iconType: [

‘success’, ‘success_no_circle’, ‘info’, ‘warn’, ‘waiting’, ‘cancel’,

‘download’, ‘search’, ‘clear’

iconColor: [

‘red’, ‘orange’, ‘yellow’, ‘green’, ‘rgb(0,255,255)’, ‘blue’, ‘purple’

}

})

10.9 radio

可以通过 color属性来修改颜色

在这里插入图片描述

需要搭配 radio-group ⼀起使⽤

10.10 checkbox

可以通过 color属性来修改颜色

在这里插入图片描述

需要搭配 checkbox-group ⼀起使⽤

11. 自定义组件

=====================================================================================================================================================

类似vue或者react中的自定义组件

⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。

11.1. 创建⾃定义组件

类似于页面，一个自定义组件由 json wxml wxss ``js 4个文件组成

可以在微信开发者⼯具中快速创建组件的⽂件结构

在这里插入图片描述

在⽂件夹内 components/myHeader ，创建组件名为 myHeader

在这里插入图片描述

11.1.1. 声明组件

⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明

myHeader.json

{

“component”: true

}

11.1.2. 编辑组件

同时，还要在组件的 wxml ⽂件中编写组件模板，在 wxss ⽂件中加⼊组件样式

slot 表⽰插槽，类似vue中的slotmyHeader.wxml

在组件的 wwxxssss ⽂件中编写样式

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

myHeader.wxss

/* 这里的样式只应用于这个自定义组件 */

.inner {

color: red;

}

11.1.3. 注册组件

在组件的 js ⽂件中，需要使⽤ component()来注册组件，并提供组件的属性定义、内部数据和⾃定义⽅法

myHeader.js

Component({

properties: {

// 这里定义了innerText属性，属性值可以在组件使用时指定

innerText: {

// 期望要的数据是 string类型

type: String,

value: ‘default value’,

}

data: {

// 这里是一些组件内部数据

someData: {}

methods: {

// 这里是一个自定义方法

customMethod: function(){}

}

})

11.2. 声明引⼊⾃定义组件

⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径

{

// 引用声明

“usingComponents”: {

// 要使用的组件的名称 // 组件的路径

“my-header”:“/components/myHeader/myHeader”

}

11.3. ⻚⾯中使⽤⾃定义组件

用来替代slot的

11.4. 其他属性

11.5. 定义段与⽰例⽅法

component构造器可⽤于定义组件，调⽤component构造器时可以指定组件的属性、数据、⽅法等。

| 定义段 | 类型 | 是否必填 | 描述 |

| — | — | — | — |

11.6. 组件-自定义组件传参

⽗组件通过属性的⽅式给⼦组件传递参数
⼦组件通过事件的⽅式向⽗组件传递参数

11.6.1. 过程

⽗组件把数据 {{tabs}}传递到⼦组件的 tabItems 属性中
⽗组件监听 onMyTab 事件
⼦组件触发 bindmytap 中的 mytap 事件

①. ⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定事件名、detail 对象

⽗ -> ⼦动态传值 this.selectComponent("#tabs")

父组件代码

// page.wxml

内容-这里可以放插槽

// page.js

data: {

tabs:[

{name:“体验问题”},

{name:“商品、商家投诉”}

]

onMyTab(e){

console.log(e.detail);

子组件代码

// com.wxml

// com.js

Component({

properties: {

tabItems:{

type:Array,

value:[]

}

/**

组件的初始数据

data: {

/**

组件的方法列表

methods: {

handleItemActive(e){

this.triggerEvent(‘mytap’,‘haha’);

}

})

11.7. 小结

标签名是中划线的⽅式
属性的⽅式也是要中划线的⽅式
其他情况可以使⽤驼峰命名

①. 组件的⽂件名如myHeader.js的等

②. 组件内的要接收的属性名如innerText

更多。。

12. 小程序生命周期

=======================================================================

分为应⽤⽣命周期和⻚⾯⽣命周期

关于小程序前后台的定义和小程序的运行机制，请参考运行机制章节。

12.1. 应⽤⽣命周期

| 属性 | 类型 | 默认值 | 必填 | 说明 |

| — | — | — | — | — |

onLaunch：应用第一次启动的时候，就会执行。可用于获取用户的个人信息等。
onShow：应用被用户看到的时候调用，对应用的数据或者界面效果重置
onHide：应用被隐藏时候调用，可暂停或清除定时器
onError：应用的代码发生了报错的时候会触发，再应用发生代码报错的时候，手机用户错误信息，通过异步请求，将错误信息发送到后台。
onPageNotFound：页面找不到就会触发，页面第一次启动的时候，如果找不到第一个入口页面，才会触发。如果页面不存在了，通过js的方式重新跳转页面，重新跳转到备用首页。

12.2. 页面生命周期

| 属性 | 类型 | 说明 |

| — | — | — |

| data | Object | ⻚⾯的初始数据 |

| onLoad | function | ⽣命周期回调—监听⻚⾯加载 |

| onShow | function | ⽣命周期回调—监听⻚⾯显⽰ |

| onReady | function | ⽣命周期回调—监听⻚⾯初次渲染完成 |

| onHide | function | ⽣命周期回调—监听⻚⾯隐藏 |

| onUnload | function | ⽣命周期回调—监听⻚⾯卸载 |

| onPullDownRefresh | function | 监听⽤⼾下拉动作 |

| onReachBottom | function | ⻚⾯上拉触底事件的处理函数 |

| onShareAppMessage | function | ⽤⼾点击右上⻆转发 |