微信小程序

最新推荐文章于 2024-04-05 01:48:16 发布

元气满满的凡诚

最新推荐文章于 2024-04-05 01:48:16 发布

阅读量304

点赞数

文章标签：小程序微信游戏

本文链接：https://blog.csdn.net/FanCheng2017/article/details/113888556

版权

微信小程序

1.小程序介绍

微信小程序，是一种不需要下载安装即可使用的应用，以微信为主题，它实现了应用"及时使用"，只需要打开要使用的微信小程序，即可运行。

2.下载环境

2.1注册账号

注册账号网址：https://mp.weixin.qq.com/

2.2下载微信小程序开发环境

下载地址

3.微信小程序配置

3.1全局配置文件

在全局配置文件app.json中的字段

pages字段

内部存储需要展示的页面的相对路径。且最后具体页面无需写后缀。
且在pages中添加合法字段，可以使开发工具自动新建对应页面。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e3P1xmOu-1613815206082)(https://s3.ax1x.com/2021/01/18/sciF1S.png)]

window字段

此字段可以设置微信小程序标题，标题栏颜色，加载具体设置，背景色等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZKfBCnnN-1613815206084)(https://s3.ax1x.com/2021/01/18/sciAXQ.png)]

window中可以设置具体字段

tabber字段

可以设置一个在所设页面显示的导航栏，用于快捷跳转。可以设置位置。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-489FL2GN-1613815206085)(https://s3.ax1x.com/2021/01/18/scik6g.png)]

tabber具体可设置字段

3.2页面配置

可以单独配置各个页面的标题栏，加载页面等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YDLnqMGT-1613815206087)(https://s3.ax1x.com/2021/01/18/scih38.png)]

具体页面配置

3.3`sitemap` 配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；

sitemap具体配置

4.数据绑定

绑定js文件与html文件数据关系，使js文件中的变量用于html文件中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ojHOKfp-1613815206088)(https://s3.ax1x.com/2021/01/18/scAouD.png)]

5.运算

5.1 wx:for

<view wx:for="{{要循环的数组或对象}}" wx:for-item="循环数组或对象的值" wx:for-index="循环数组或对象的索引" wx:key="绑定一个字符串">
    索引：{{index}}
    值：{{itrm}}
</view>

wx:key="唯一值"用来提高列表渲染性能。
若是wx:key绑定一个普通字符串，那么这个字符串的名称肯定是循环数组中的对象的为一值。
wx:key ="*this" 就表示绑定数组是一个普通数组。

5.2 wx:if

条件渲染

<view wx:if="{{判断语句或boolen变量}}">
	判断成功执行的语句。
</view>
<view wx:elif="{{判断语句或boolen变量}}">
</view>
<view wx:else>
</view>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4GWelSSN-1613815206090)(https://s3.ax1x.com/2021/01/18/sceAPA.png)]

5.3 hidden属性

<view hidden>   //隐藏此标签
	
</view>
<view hidden="{{true}}">   //隐藏此标签
	
</view>
<view hidden="{{falst}}">   //显示此标签
	
</view>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZKfvVD26-1613815206090)(https://s3.ax1x.com/2021/01/18/scmmWR.png)]

6.事件绑定

给予一个标签绑定动作事件，当触发的时候，自动运行。

需要给相关标签绑定相关事件,编写相关事件触发的执行动作.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8O8dqltq-1613815206091)(https://s3.ax1x.com/2021/01/23/s7sg3R.png)]

事件动作名(事件变量名){
	console,log(事件变量名);				//打印事件变量内容
}

注：赋值语句：
```
this.setdata({
	赋值1；赋值2
})
```

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wFEF4wT6-1613815206091)(https://s3.ax1x.com/2021/01/23/s7s2g1.md.png)]

7.样式wxss

单位rpx

rpx；可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx.可以和具体屏幕宽度进行代换，但是代换比例不同大小的屏幕比例不相同，

样式导入

将其他.wxss文件导入到文件中

引入代码是通过@import来引入
路径只能写相对路径

@import""

8.常见组件

8.1 view

视图容器相当于div

<view>   </view>

官方文档

8.2 text

文本标签
只能嵌套text
可以实现文本的复制（只有此标签可以）
可以对空格回车进行编码

<text>  </text>

官方文档

###8.3 image

图片标签，image标签默认宽度为320px,高240px.
支持懒加载。
src="图片地址"
mod="" 选择图片如何和标签适配。

<image src="图片地址"/ mod="选择图片内容如何和标签适配">

官方文档

8.4 swiper

微信里内置的轮播组件
其中轮播项只能用swiper-item组件。
swiper标签存在默认的样式：width 100% height 150px
swiper无法实现由内容撑开。
autoplay是否轮播。
interval="毫秒数"轮播事件。
circular 衔接轮播。
indicator-dots 显示指示器，分页器。
indicator-color未选择分页器颜色。
indicator-active-color 已选中分页器颜色。

<swiper autoplay interval circular indicator-dots>
    <swiper-item>
    	<image sre="图片地址1"/>
    </swiper-item>
    <swiper-item>
    	<image sre="图片地址2"/>
    </swiper-item>
</swiper>

官方文档

8.4.1 swiper-item

1.swiper 标签其中的标签，是swiper中的一个轮播项。

官方文档

8.5 navigator

导航组件，类似超链接标签。
块级元素，默认换行。
url="" 要跳转的位置(最后一项无需后缀名)。
target 要跳转的位置。(默认为本小程序，也可以跳转到别的小程序)。
open-type 跳转的方式。

<navigator url="/文件/文件/项目">
    显示文字
</navigator>

官方文档

8.6 rich-text

富文本标签。
接受标签字符串，对象数组。
nodes="" 其中放标签字符串。

<rich-text nodes="{{字符串名}}"> </rich-text>

官方文档

8.7 button

按钮标签
size="" 控制按钮大小。
type="" 控制颜色。
plain 是否镂空。
loading 在前面加一个等待图标。
open-type="" 开放能力:

contact 直接打开客服对话功能，需要在微信小程序的后台配置。
share 转发当前的小程序到微信朋友中。
getPhoneNumber 获取当前用户的手机号码信息。
getUserInfo 获取当前用户的个人信息。
launchApp在小程序中直接打开app
openSetting 打开小程序内置的授权页面。
feedback 打开小程序内置的意见反馈页面


<button size="" type="" plain open-type="选择开放能力"> 按钮名</button>

官方文档

8.8 icon

字体图标。
type 选择icon 的有效属性。
size 图标的大小。
color 图标的颜色。

<icon type="" size="" color=""> </icon>

官方文档

8.9 radio

单选框标签。
必须和父元素 radio-group标签来使用。
其中的value是值.
在一个父元素 radio-group标签中只能选择一个元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZzpFYCGW-1613815206092)(https://s3.ax1x.com/2021/01/27/szW76I.png)]

<radio-group bindchange="handleChange">
	<radio value="man">男</radio>
	<radio value="women">女</radio>
</radio-group>

官方文档

8.10 checkbox

复选框标签。
必须和父元素 checkbox-group标签来使用。
其中的value是值。
在一个父元素checkbox-group中可以选择多个标签。

	<checkbox-group bindchange="handleItemChange">
		<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
			{{item.name}}
		</checkbox>
	</checkbox-group>
--------------------------------------------------------------------------------------------
	<checkbox-group bindchange="handleItemChange">
		<checkbox value="">
			显示
		</checkbox>
        <checkbox value="">
			显示
		</checkbox>
        <checkbox value="">
			显示
		</checkbox>
	</checkbox-group>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9Cdz0vJ-1613815206093)(https://s3.ax1x.com/2021/01/28/y9XMg1.md.png)]

9.自定义组件 Component

官方文档

###9.1创建自定义标签

就像一个页面，由.js .wxml .json .wxss四个文件组成。
创建自定义组件：要使用自定义组件，先创建component文件及四个不同后缀的文件。
声明自定义组件：在要使用自定义组件的页面的.json文件的usingComponents中添加相应键值对。
使用自定义组件：在要使用的.wxml文件中使用<自定义组件名></自定义组件名>
注：在普通页面.js文件中，存放事件回调函数是存放在data同层级下！！
注：在自定义组件页面.js文件中，存放事件回调函数是存放在methods中！！
可以实现父项子传递，即由页面向自定义组件传递数据。

声明：

 //在要使用自定义组件的.json文件中
"usingComponents": {
    "自定义组件名":"自定义组件位置"
  }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tRqSIoqd-1613815206095)(https://s3.ax1x.com/2021/01/30/ykqQw6.png)]

使用：

//在要使用自定义组件的.wxml文件内
<自定义组件名></自定义组件名>

父项子传递：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WrGfZyUs-1613815206095)(https://s3.ax1x.com/2021/01/31/yVSOYR.png)]

10.生命周期

###10.1 应用的生命周期:

属性	类型	必填	说明
onLaunch	Function	否	监听小程序初始化
onShow	Function	否	监听小程序是否启动或者切前台
onHide	Function	否	监听小程序是否切后台
onError	Function	否	错误监听函数
onPageNotFound	Function	否	页面不存在监听函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8uw6wpcV-1613815206096)(https://s3.ax1x.com/2021/02/01/yec5xP.png)]

App({
  onLaunch(){
    console.log("第一次启动");
  },
  onShow(){
    console.log("用户看到时");
  },
  onHide(){
    console.log("应用被隐藏");
  },
  onError(){
    console.log("当发生报错的时候");
  },
  onPageNotFound(){
    console.log("页面找不到的时候");
  }
})

官方文档

10.2 页面的生命周期。

属性	类型	说明
data	Object	页面初始数据
onLoad	function	生命周期函数回调-监听页面加载
onShow	function	生命周期函数回调-监听页面显示
onReady	function	生命周期函数回调-监听页面初次渲染完成
onHide	function	生命周期函数回调-监听页面隐藏
onUnload	function	生命周期函数回调-监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发
onTabltemTap	function	当前是tab也时，点击tab触发