微信小程序基本语法

官网 https://developers.weixin.qq.com/miniprogram/dev/framework/
视频教程:尚硅谷微信小程序开发教程,2024最新微信小程序项目实战!
仿慕尚花坊项目源码:https://gitee.com/abcdfdewrw/flower-workshop

目录

  • 一,初识微信小程序
  • 二,文件和目录结构介绍
  • 三,配置文件介绍
  • 四,尺寸单位rpx
  • 五,事件绑定和事件对象
      • 【事件绑定】
      • 【事件传参】
  • 六,事件/阻止事件冒泡
  • 七,声明和绑定数据
  • 八,setData修改数据
  • 九,简易版双向数据绑定
  • 十,列表渲染
  • 十一,条件渲染
  • 十二,小程序的运行机制
  • 十三,小程序更新机制
  • 十四,小程序生命周期介绍
      • 【应用生命周期】
      • 【页面生命周期】
      • 【组件的生命周期】
      • 【组件所在页面的声明周期】
      • 补充:
      • 总结:
  • 十五,小程序API
      • 【界面交互】
      • 【本地存储】
      • 【路由跳转】
      • 【上垃加载/下拉刷新】
  • 十六,插槽
  • 十七,监听
  • 十八,组件通信
      • 一,父向子传参 Properties
      • 二,子向父传参
      • 三,获取组件实例
  • 十九,小程序分包加载
  • 二十,获取微信头像
  • 二十一,转发功能 / 分享朋友圈
  • 二十二,手机号验证组件
  • 二十三,客服功能
  • 二十四,自定义导航栏
  • 二十五,骨架屏
  • 二十六,mobx-miniprogram
  • 二十七,用户登录
  • 二十八,地理位置功能

一,初识微信小程序

微信小程序是一种运行在微信内部的 轻量级 应用程序。
在这里插入图片描述
小程序的四大特性:无须安装,用完即走,无须卸载,触手可及。

二,文件和目录结构介绍

在这里插入图片描述
在这里插入图片描述

三,配置文件介绍

小程序中常见的配置文件有以下几种:
1,app.json : 小程序全局配置文件,用于配置小程序的一些全局属性和页面路由;
2,页面.json : 小程序页面配置文件,也称局部配置文件,用于配置当前页面的窗口样式,页面标题等;
3,project.config.json:小程序项目的配置文件,用于保存项目的一些配置信息和开发者的个人设置;
4,sitemap.json:配置小程序及其页面是否允许被微信索引,提高小程序在搜索引擎搜索到的概率。

四,尺寸单位rpx

rpx:是小程序新增的自适应单位,它可以根据不同的设备屏幕宽度进行自适应缩放;
小程序规定任何型号手机:屏幕宽都为750rpx

五,事件绑定和事件对象

【事件绑定】

在这里插入图片描述

【事件传参】

第一种方法:data-* 传参
在这里插入图片描述
第二种方法:mark:* 传参
在这里插入图片描述
在这里插入图片描述

六,事件/阻止事件冒泡

事件分为 冒泡事件非冒泡事件
冒泡事件:当一个组件的事件被触发后,该事件会向父节点传递;
非冒泡事件:当一个组件的事件被触发后,该事件不会向父节点传递。

<button catch:tap="btnHandler"></button> // 用catch来阻止事件冒泡

七,声明和绑定数据

在这里插入图片描述

// 展示内容
<text>{{scholle}}</test>// 绑定属性值,如果需要动态绑定一个变量,属性值也需要使用双大括号进行包裹
<text id="{{id}}">{{scholle}}</test>// 如果属性值是布尔值,也需要使用双大括号进行包裹
<checkbox checked="{ischecked}" /> 

八,setData修改数据

在这里插入图片描述

// 修改值
this.setData({key:value}) // key 是需要更新的数据;value 是最新的值

九,简易版双向数据绑定

在这里插入图片描述

十,列表渲染

在这里插入图片描述
在这里插入图片描述

  <swiperautoplayclass="swiper"indicator-active-color="#FF734C"interval="2000"duration="1000"indicator-color="rgba(0, 0, 0, .3)"bindchange="getSwiperIndex"><block wx:for="{{ bannerList }}" wx:key="index"><swiper-item class="swiper-item"><navigatorclass="navigator"hover-class="none"url="/modules/goodModule/pages/goods/detail/detail?goodsId={{ item.id }}"><image class="img" src="{{ item.imageUrl }}"></image></navigator></swiper-item></block></swiper>

十一,条件渲染

在这里插入图片描述

十二,小程序的运行机制

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

十三,小程序更新机制

在这里插入图片描述

 // 检测冷启动版本更新onLaunch() {const updateManager = wx.getUpdateManager(); // 监听下载的状态// 当下载完成新版本以后,会触发 onUpdateReady 回调函数updateManager.onUpdateReady(function () {// 在回调函数中给用户提示wx.showModal({title: "更新提示",content: "新版本以及准备好,是否重启应用?",success: (res) => {if (res.confirm) {// 强制当前小程序使用新版本并且会重新启用当前小程序updateManager.applyUpdate();}},});});},

十四,小程序生命周期介绍

在这里插入图片描述

【应用生命周期】

在这里插入图片描述

【页面生命周期】

在这里插入图片描述
onReady 代表页面已经准备妥当,可以和视图层进行交互

【组件的生命周期】

在这里插入图片描述

// 组件生命周期声明对象
lifetimes {created() {},attached() {},……
}

【组件所在页面的声明周期】

在这里插入图片描述

补充:

1,tabBar页面之间相互切换,页面不会被销毁;
2,点击左上角,返回上一个页面,会销毁当前页面。
在这里插入图片描述

总结:

在这里插入图片描述
在这里插入图片描述

十五,小程序API

【界面交互】

wx.showLoading() // 显示loading提示框
wx.hideLoading() // 关闭loading提示框
wx.showModal() // 模态对话框
wx.showToast() // 消息提示框

【本地存储】

在这里插入图片描述

【路由跳转】

在这里插入图片描述

【上垃加载/下拉刷新】

onReachBotoom() {} // 监听用户上拉加载
onPullDownRefresh(){} // 监听用户下拉刷新在app.json或者page.json 中配置距离页面底部距离:onReachBottomDistance;默认50px

十六,插槽

在这里插入图片描述

十七,监听

在页面的的js中写上 observers{'key':(newValue) => {}
}// 监听单个属性
observers: {'n1': function(newN1){……}},// 监听多个数据
observers: {'n1, n2': function(newN1, newN2){……}},// 监听全部对象observers: {'obj.**': function(newObj){……}},

十八,组件通信

一,父向子传参 Properties

二,子向父传参

子组件:
sendData() {this.triggerEvent('myevent',this.data)
}父组件:
……
<customer bind:myevent="getData" /> // 子组件
……getData(event) {……
}

三,获取组件实例

// 在父组件中 获取 子组件的实例
……
<customer bind:myevent="getData" class='child' /> // 子组件
……getChild() {const res = this.selectComponent('.child') // 类似于 ref
}

十九,小程序分包加载

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

 --app.json // 分包设置"subPackages": [{"root": "modules/settingModule", // 分包根目录"name": "settingModule", // 分包别名"pages": [ // 分包路径"pages/address/add/index","pages/address/list/index","pages/profile/profile"]}],// 分包预下载"preloadRule": { // key:value的形式:key代表的是 当访问到这个目录的时候,预下载分包"pages/settings/settings":{ "network": "all","packages": ["settingModule"]}}

二十,获取微信头像

在这里插入图片描述

    <view class="avatar"><buttonhover-class="none"open-type="chooseAvatar"bind:chooseavatar="onChooseAvatar"><image src="{{ userInfo.headimgurl || '/assets/images/avatar.png' }}" /></button></view>async onChooseAvatar(e) {const { avatarUrl } = e.detail;const { data } = await reqUploadFile(avatarUrl, "file");this.setData({"userInfo.headimgurl": data.data,});},

在这里插入图片描述

   <form bindsubmit="getNickName"><inputtype="nickname"name="nickname"class="input-name"value="{{ userInfo.nickname }}"/><view class="dialog-content"><button class="cancel" bindtap="cancelForm" form-type="reset">取消</button><button class="confirm" type="primary" form-type="submit">确定</button></view></form>getNickName(event) {// console.log('弹窗确定=》',event);const { nickname } = event.detail.value;this.setData({"userInfo.nickname": nickname,isShowPopup: false,});},

二十一,转发功能 / 分享朋友圈

在这里插入图片描述
在这里插入图片描述

  // 转发功能onShareAppMessage(){return {title:"只为你怦然心动",path:'/pages/index/index',imageUrl:'../../../../../assets/images/love.jpg'}},// 分享朋友圈onShareTimeline() {return {title:"只为你怦然心动",path:'/pages/index/index',imageUrl:'../../../../../assets/images/love.jpg'}},

二十二,手机号验证组件

在这里插入图片描述

二十三,客服功能

在这里插入图片描述

二十四,自定义导航栏

在这里插入图片描述

二十五,骨架屏

在这里插入图片描述
可在 微信开发者工具 中自动生成骨架屏
在这里插入图片描述

二十六,mobx-miniprogram

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

npm install --save mobx-miniprogram mobx-miniprogram-bindings
-- 创建一个Store对象 userStore
// observable 创建被检测的对象,对象中的属性会被转换为响应式数据
// action 函数是用来显示的定义 action 方法import { observable, action } from "mobx-miniprogram";export const userStore = observable({token: "",userInfo: {},setToken: action(function (token) {this.token = token;}),setUserInfo: action(function (userInfo) {this.userInfo = userInfo;}),
});-- 页面中导入使用
import { userStore } from "../../../../stores/userstore";
ComponentWithStore({storeBindings: {store: userStore,fields: ["userInfo"],actions: ["setUserInfo"]},})

二十七,用户登录

在这里插入图片描述
在这里插入图片描述

二十八,地理位置功能

首先在 app.json 中声明地理位置方法

--app.json"requiredPrivateInfos": ["getLocation","chooseLocation"],"permission": {"scope.userLocation": {"desc": "获取地理位置信息用于填写收获地址" // 描述}}

wx.getLocation 方法

 // 获取用户地理位置信息async onLocation() {// 获取当前的地理位置(精度,纬度,高度)const res = await wx.getLocation();console.log("获取用户地理位置=》", res);},

如果用户拒绝授权,后面重新授权思路
在这里插入图片描述
wx.chooseLocation() 方法

  // 获取用户地理位置信息async onLocation() {// 打开地图让用户选择const res = await wx.chooseLocation()console.log("获取用户地理位置=》", res);},

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/872573.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【深度学习】BeautyGAN: 美妆,化妆,人脸美妆

https://www.sysu-hcp.net/userfiles/files/2021/03/01/3327b564380f20c9.pdf 【深度学习】BeautyGAN: Instance-level Facial Makeup Transfer with Deep Generative Adversarial Network BeautyGAN: Instance-level Facial Makeup Transfer with Deep Generative Adversaria…

交叉编译ethtool(ubuntu 2018)

参考文章&#xff1a;https://www.cnblogs.com/nazhen/p/16800427.html https://blog.csdn.net/weixin_43128044/article/details/137953913 1、下载相关安装包 //ethtool依赖libmul git clone http://git.netfilter.org/libmnl //ethtool源码 git clone http://git.kernel.or…

国家护网行动面试题总结

一、信息收集流程 1.获取域名的 whois 信息 , 获取注册者邮箱姓名电话等。 2.通过站长之家、明小子、 k8 、站长之家等查询服务器旁站以及子域名站点&#xff0c;因为主站一般 比较难&#xff0c;所以先看看旁站有没有通用性的 cms 或者其他漏洞。 3、通过 DNS 域传送…

PriorityQueue 阅读记录

1、前言 1、优先队列&#xff0c;底层通过数组来构造树&#xff08;二叉树) 来实现的。 2、默认是最小堆&#xff08;取出来的是最小值)&#xff0c;可以通过传入一个比较器 comparator 来构造一个最大堆。 3、传入的参数不能为空&#xff0c;否则抛出NPE问题。 4、最大堆的…

Study--Oracle-07-ASM自动存储管理(一)

一、ASM实例和数据库实例对应关系 1、ASM是Oracle 10g R2中为了简化Oracle数据库的管理而推出来的一项新功能&#xff0c;这是Oracle自己提供的卷管理器&#xff0c;主要用于替代操作系统所提供的LVM&#xff0c;它不仅支持单实例&#xff0c;同时对RAC的支持也是非常好。ASM可…

汽车开发阶段(OTS/VFF/PVS/OS/SOP)

OTS&#xff1a;即英语中的Off Tooling Sample&#xff0c;通常被称为工装样件。它指的是通过配套设备、工装夹具以及模具制造出来的样品&#xff0c;但并不强调生产的时间效率&#xff0c;主要用于验证产品的设计能力。 VFF&#xff1a;在德语中表示为Vorserien Freigabefahr…

集成excel工具:自定义导入回调监听器、自定义类型转换器、web中的读、捕获文件格式转换错误ExcelDataConvertException

文章目录 I 封装导入导出1.1 定义工具类1.2 自定义读回调监听器: 回调业务层处理导入数据1.3 定义文件导入上下文1.4 定义回调协议II 自定义转换器2.1 自定义枚举转换器2.2 日期转换器2.3 时间、日期、月份之间的互转2.4 LongConverterIII web中的读3.1 使用默认回调监听器3.2…

C++基础知识:C++内存分区模型,全局变量和静态变量以及常量,常量区,字符串常量和其他常量,栈区,堆区,代码区和全局区

1.C内存分区模型 C程序在执行时&#xff0c;将内存大方向划分为4个区域 代码区:存放函数体的二进制代码&#xff0c;由操作系统进行管理的&#xff08;在编译器中所书写的代码都会存放在这个空间。&#xff09; 全局区:存放全局变量和静态变量以及常量 栈区:由编译器自动分…

Mysql具体数据操作和表的约束(上)

表中数据的增删改查 插入数据(添加数据) 1.按指定字段插入数据:insert into <表名> (字段1,字段2,...) values (),(),.... 注意1:values后面的括号是指行数(几条记录),一个括号表示插入一条记录,多个括号以此类推 注意2:values后面括号内部插入的数据…

【python学习】第三方库之pandas库的定义、特点、功能、使用场景和代码示例

引言 pandas是一个强大的Python库&#xff0c;用于数据分析和数据处理。它基于NumPy&#xff0c;提供了灵活的数据结构&#xff08;Series和DataFrame&#xff09;和数据操作功能&#xff0c;是数据科学和机器学习中不可或缺的工具 文章目录 引言一、安装pandas第三方库二、pan…

nginx反向代理实例

一. 准备工作 1.1 ngnix的安装 nginx基本概念和安装-CSDN博客 1.2 安装tomcat tomcat服务器是一个免费的开放源代码的Web应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;适用于中小型系统和并发访问用户不是很多的情况。 前往官网网站&#xff1a;Apache Tomcat - Ap…

C++迈向精通:模板中的引用与remove_reference原理

remove_reference 原理 模板中的引用参数 在模板中&#xff0c;双 &‘ 会被解析为“引用”&#xff0c;这个“引用”可以是“左值”引用&#xff0c;也可以是“右值”引用。 例如&#xff1a; template <typename T> void func(T &&a) {std::cout <&l…

从零开始接触人工智能大模型,该如何学习?

人工智能是计算机科学领域中最具前瞻性和影响力的技术之一。它是一种智慧型算法&#xff0c;能够模拟人类的思维过程&#xff0c;处理大量的数据和信息&#xff0c;从而发现隐藏在其中的规律和趋势。人工智能的应用范围非常广泛&#xff0c;包括语音识别、图像识别、自然语言处…

《简历宝典》14 - 简历中“项目经历”,实战讲解,前端篇

上一节我们针对项目经历做了内功式的讲解&#xff0c;为了加深读者的印象&#xff0c;可以更轻松的套用到自己的简历上&#xff0c;本章继续从前端开发、Java开发以及软件测试的三个角度&#xff0c;再以校招和初级、中级以及高级三个维度分别入手&#xff0c;以实战讲解的形式…

gihub导入gitee仓库实现仓库同步

昨天在GitHub里导入了gitee仓库&#xff0c;但是在仓库同步这里卡了很久&#xff0c;因为网上大多数都是从github导入gitee&#xff0c;然后github生成token放入实现同步&#xff0c;但是我找到一种更为方便的&#xff01; 1.首先找到项目文件下的.git文件里的config文件 2.在…

Python实战MySQL之数据库操作全流程详解

概要 MySQL是一种广泛使用的关系型数据库管理系统,Python可以通过多种方式与MySQL进行交互。本文将详细介绍如何使用Python操作MySQL数据库,包括安装必要的库、连接数据库、执行基本的CRUD(创建、读取、更新、删除)操作,并包含具体的示例代码,帮助全面掌握这一过程。 准…

dom4j 操作 xml 之按照顺序插入标签

最近学了一下 dom4j 操作 xml 文件&#xff0c;特此记录一下。 public class Dom4jNullTagFiller {public static void main(String[] args) throws DocumentException {SAXReader reader new SAXReader();//加载 xml 文件Document document reader.read("C:\\Users\\24…

基于jeecgboot-vue3的Flowable流程支持bpmn流程设计器与仿钉钉流程设计器-编辑多版本处理

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、前端编辑带有仿钉钉流程的处理 /** 编辑流程设计弹窗页面 */const handleLoadXml (row) > {console.log("handleLoadXml row",row)const params {flowKey: row.key,ver…

搜集日志。

logstash 负责&#xff1a; 接收数据 input — 解析过滤并转换数据 filter(此插件可选) — 输出数据 output input — decode — filter — encode — output elasticsearch 查询和保存数据 Elasticsearch 去中心化集群 Data node 消耗大量 CPU、内存和 I/O 资源 分担一部分…

四、GD32 MCU 常见外设介绍

系统架构 1.RCU 时钟介绍 众所周知&#xff0c;时钟是MCU能正常运行的基本条件&#xff0c;就好比心跳或脉搏&#xff0c;为所有的工作单元提供时间 基数。时钟控制单元提供了一系列频率的时钟功能&#xff0c;包括多个内部RC振荡器时钟(IRC)、一个外部 高速晶体振荡器时钟(H…