微信小程序

最新推荐文章于 2024-09-30 15:42:36 发布

ZDM_9999

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量116

点赞数

文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/ZDM_9999/article/details/128971050

版权

微信小程序

什么是微信小程序？

运行在微信中的一个扩展应用

小程序：

1.触手可及：单个小程序的体积不能大于2mb（秒开）

2.用完即走：因为小程序的体积很小所以大家不需要担心他占用我们的手机储存

开发准备

1.注册开发者（微信小程序）在微信公众平台中进行注册与扫码登录 https://mp.weixin.qq.com/

注册的时候个人信息需要填写真实有效的信息

2.开发工具的准备微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.开发工具的安装微信开发者工具是一个国人开发的应用所以大家在安装的时候随意安装没有什么特殊的要求

helloword

我们打开微信开发者工具创建项目填入指定内容

小程序的全局配置

写在app。json中的配置对所有页面都生效

app.json https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

小程序页面配置

就是对指定一个页面生效在每个页面中都会又一个json文件那么这个文件中我们可以使用原来在app.json中的一些配置来优化指定页面如果我们在页面中配置了相关配置那么就会覆盖全局配置

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

wxml

就是等同于html 只是微信在此基础之上进行了优化------ 腾讯给我们提供了一整套现成的标签称之为组件

数据绑定

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

属性插入变量

vue中属性插变量使用的是 v-bind

react中使用的是属性={xxxxx}

小程序中使用的是属性="{{变量}}"

小程序组件

https://developers.weixin.qq.com/miniprogram/dev/component/

view

视图容器------类似于原来的div

text

文本 --- 在小程序中所有文字都是用他忘掉之前学的 h p em 等等标签吧

navigator

页面链接页面导航在小程序中除了在tabbar中设置页面跳转之外还可以通过navigator组件来控制页面的跳转（因为tabbar只能控制5个页面的跳转但是在一个项目中页面的数量肯定是大于5个的而且 tabbar只能在页面的最下面显示不够灵活所以我们除了这tabbar跳转之外还要学习navigator）

<text>pages/home/home.wxml</text>

<navigatorurl="../all/all"open-type="redirect">点我去详情页面</navigator>

<!-- 那么默认没有办法跳转但是我就是想跳转怎么办？那么在此时就要给当前这个跳转

组件添加他的open-type属性并且写入switchTab属性值这个属性值的意思就是跳转tabbar页面

-->

<navigatorurl="../user/user" open-type="switchTab">点我去用户页面</navigator>

小程序自定义组件

在小程序中呵呵vue react一样都可以让我们自己来定义组件方便ui的复用

1.在与pages等文件夹同级创建components文件夹用来容纳我们的组件

2.新建对应的组件文件（一个组件也是由js json wxml wxss组成）

3.在想使用的页面中找到对应的json 进行引用然后在对应的页面中可以直接使用

{

"usingComponents": {

"Link":"../../components/link/link"

}

小程序组件传值

正向传值 properties

小程序事件

事件分类

事件分为冒泡事件和非冒泡事件：

冒泡事件bind：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件catch：当一个组件上的事件被触发后，该事件不会向父节点传递

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发	1.9.90