![](https://img-blog.csdnimg.cn/direct/c19e518924db4fef98be589a5ee72194.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序
文章平均质量分 90
记录总结微信小程序的一些知识和经验
曾凡玉@
享受生命的每一分一秒
展开
-
1.微信小程序开发之准备工作
在将小程序项目创建好以后,我们先来熟悉小程序项目的目录结构,如下图:主体文件页面文件主体文件又称小程序全局文件,顾名思义,全局文件能够作用于整个小程序,影响到小程序的每个页面,且主体文件必须放到项目的根目录下文件名作用是否必须app.js小程序入口文件必须app.json小程序的全局配置必须app.wxss小程序的全局样式非必须页面文件是每个页面所需的文件,小程序页面文件都存放在 pages 目录下,一个页面一个文件夹,每个页面通常由四个文件组成,每个文件只对当前页面有效:文件名。原创 2024-05-16 14:32:51 · 1244 阅读 · 0 评论 -
2.微信小程序之配置文件
小程序中常见的配置文件有以下几种:app.json➡ 小程序全局配置文件,用于配置小程序的一些全局属性和页面路由。页面.json➡ 小程序页面配置文件,用于配置当前页面的窗口样式、页面标题等➡ 小程序项目的配置文件,用于保存项目的一些配置信息和开发者的个人设置➡ 配置小程序及其页面是否允许被微信索引,提高小程序在搜索引擎搜索到的概率下面我们依次来说明一下它们的用途。原创 2024-05-16 16:49:25 · 658 阅读 · 0 评论 -
3.微信小程序之常用组件篇
在开 Web 网站的时候:页面的结构由HTML进行编写,例如:经常会用到divpspanimga等标签页面的样式由CSS进行编写,例如:经常会采用.class#idelement等选择器但在小程序中不能使用HTML标签,也就没有DOM和BOM,同时仅仅支持部分CSS选择器不过不用担心,小程序中提供了同样的角色:其中WXML充当的就是类似HTML的角色,只不过在WXML中没有divpspanimga等标签,在WXML中需要使用 小程序提供的viewtextimagenavigator。原创 2024-05-16 17:41:03 · 1129 阅读 · 0 评论 -
4.微信小程序之事件处理
在小程序中,可以通过事件传参的方式,将数据传递给事件处理函数。常见的事件包括点击事件、输入事件等。在组件节点中可以通过data-的方式传递一些自定义数据,传递的数据可以通过事件对象的方式进行获取📌注意事项使用data-方法传递参数的时候,多个单词由连字符连接连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符,最终会呈现为,最终会呈现为在 wxml 文件中,使用data-*属性将数据传递给事件处理函数。-- 如果需要进行事件传参,需要再组件上通过 data- 的方式传递数据 -->原创 2024-05-17 17:15:01 · 1004 阅读 · 1 评论 -
5.微信小程序之模板语法
Page({// 定义页面中使用的数据data: {age: 10,gender: '男'Page({// 定义页面中使用的数据data: {原创 2024-05-18 11:06:25 · 893 阅读 · 0 评论 -
6.微信小程序之生命周期
应用生命周期是指应用程序进程从创建到消亡的整个过程小程序的生命周期指的是 小程序从启动到销毁的整个过程在打开一个小程序应用的时候都需要经历一系列的初始化步骤,比如页面是否加载完成、页面是否初次渲染完成等等。在此过程中,小程序也会运行被称为生命周期钩子的函数,这些函数由小程序框架本身提供,被称为生命周期函数,生命周期函数会按照顺序依次自动触发调用。帮助程序员在特定的时机执行特定的操作,辅助程序员完成一些比较复杂的逻辑。让开发者有机会在特定阶段运行自己的代码。原创 2024-05-20 09:55:35 · 1017 阅读 · 0 评论 -
7.微信小程序之原生常用API
小程序中也能够像网页一样支持本地数据缓存,本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在用户关闭小程序重新打开时可以恢复之前的状态。其包含以下 8个主要的 API。但一般我们在开发阶段时,处于开发阶段的服务器接口可能还没部署到对应的域名下,经常会通过另一个域名来进行开发调试,考虑到这一点,为了方便开发者进行开发调试,开发者工具、小程序的开发版和小程序的体验版在某些情况下允许。:关闭当前页面,跳转到应用内的某个页面。原创 2024-05-20 10:55:48 · 822 阅读 · 0 评论 -
8.微信小程序之自定义组件
在组件的 .js 中,需要调用Component方法创建自定义组件,Componentdata数据:组件的内部数据methods方法:在组件中事件处理程序需要写到methods中才可以/*** 组件的初始数据:用来定义当前组件内部所需要使用的数据*/data: {},/*** 组件的方法列表:在组件中,所有的事件处理程序都需要写到 methods 方法中*/methods: {// 更新复选框的状态isChecked:!})})原创 2024-05-21 14:37:31 · 1149 阅读 · 0 评论 -
9.微信小程序之npm 支持
在实际的开发中,随着项目的功能越来越多、项目越来越复杂,文件目录也变的很繁琐,为了方便进行项目的开发,开发人员通常会对目录结构进行调整优化,例如:将小程序源码放到miniprogram 目录下。把除了src外面的三个与项目没有多大关系的文件之外,其他都移到新建的文件夹src目录下调整完目录后:启动失败需要指定小程序源文件目录:现在开始重新通过 npm 安装包。原创 2024-05-22 11:11:07 · 1002 阅读 · 0 评论 -
10.微信小程序之分包加载
小程序的代码通常是由许多页面、组件以及资源等组成,随着小程序功能的增加,代码量也会逐渐增加,体积过大就会导致用户打开速度变慢,影响用户的使用体验。分包加载是一种小程序优化技术。将小程序不同功能的代码,分别打包成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载,在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。每个分包可以包含多个页面、组件、样式和逻辑等。当小程序需要使用某个分包时,才会加载该分包中的代码。原创 2024-05-22 14:35:22 · 660 阅读 · 0 评论 -
11.微信小程序之开发能力
手机验证组件,用于帮助开发者向用户发起手机号申请,必须经过用户同意后,才能获得由平台验证后的手机号,进而为用户提供相应服务。需要将 input 组件 type 的值设置为 nickname,当用户输入框输入时,键盘上方会展示微信昵称。1.需要将 button 组件 open-type 的值设置为 contact,当用户点击后就会进入客服会话。当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像、昵称填写能力快速完善。2.在微信公众后台,绑定后的客服账号,可以登陆。原创 2024-05-22 15:40:43 · 670 阅读 · 0 评论 -
12.微信小程序上线发布及补充扩展
小程序默认的导航栏与 APP 一样都位于顶部固定位置。但是默认导航栏可能会影响小程序整体风格,且无法满足特定的设计需求,这时候,就需要进行自定义导航栏。在 app.json 或者 page.json 中,配置 navigationStyle 属性为 custom,即可 自定义导航栏在设置以后,就会移除默认的导航栏,只保留右上角胶囊按钮。原创 2024-05-22 16:03:10 · 820 阅读 · 0 评论 -
13.微信小程序之mobx-miniprogram篇
小程序页面、组件间的数据通信方案:propertiesgetApp()pubsub-js在中小型项目中,使用这些数据通信方式已经能够满足我们项目的需求。但是随着项目的业务逻辑越来越复杂,组件和页面间通信就会变的非常复杂。原创 2024-05-28 13:55:46 · 1002 阅读 · 0 评论 -
14.微信小程序之地理定位功能
小程序地理定位是指通过小程序开发平台提供的。原创 2024-05-28 16:31:01 · 2040 阅读 · 2 评论 -
15.微信小程序之async-validator 基本使用
第二个参数:回调函数,回调函数有两个参数 errors, fields。可以方便地构建表单验证逻辑,使得错误提示信息更加友好和灵活。errors:如果验证成功,返回 null,验证错误,返回数组。创建表单验证实例,将验证规则传递给构造函数,产生实例。的表单验证库,支持异步验证规则和自定义验证规则。fields:需要验证的字段,属性值错误数组。第一个参数:需要验证的数据。2.开发者工具,点击构建。3.在 js 文件中导入。中的表单验证都是基于。原创 2024-05-28 17:29:32 · 601 阅读 · 0 评论