04 2023 档案
摘要：在我们企业开发当中经常有个人中心等相关需求，这些需求当中有一个功能点就是用户头像信息，这种信息用户可以选择自己手机当中的资源进行上传并保存设置。本章就是来介绍下这种功能在微信小程序当中该如何进行实现。 首先我们在首页当中放一个 image 组件用于展示图片： index.wxml: <image m
阅读全文
摘要：官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/image.html image 组件 图片组件。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。 废话不多说直接上代码。 属性
阅读全文
摘要：button 官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/button.html 我这里废话不多说，很简单就是直接来使用这个组件，说下使用当中的注意点。 属性 !> 注意点：默认情况下小程序中的按钮是块级元素 s
阅读全文
摘要：icon 组件 icon 组件，想必大家都应该清楚这个是图标组件吧，在微信小程序当中，为我们提供了一套 icon 图标类型。 ?> icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, searc
阅读全文
摘要：text 官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/text.html text 组件：相当于 span，行内元素 行内元素，我在 view(块级元素)当中编写了两个 text 组件，发现都在一行当中进行显示，
阅读全文
摘要：什么是内置组件 内置组件就是，小程序为我们封装好的组件，开发者可以通过组合这些组件进行快速开发。 常用的内置组件 view 组件：相当于 div，块级元素，小程序提供了一些封装好的属性给我们使用例如：hover-xxx text 组件： icon 组件： button 组件： image 组件： s
阅读全文
摘要：所需技术点 事件的数据传递 事件的绑定 数据的绑定 条件渲染 包装元素 案例最终实现效果 开始整活： 编写 WXML 页面结构代码： index.wxml: <view class="tab-control" > <block wx:for="{{items}}" wx:key="*this"> <
阅读全文
摘要：在经过上一篇文章的介绍，已经清楚的了解了data与mark的区别，本章将要介绍的也是事件对象当中的两个属性，分别是，touches与changedTouches。 首先我们先搭建一个案例，运行这个案例看输出的事件对象当中，这个两个属性分别保存的是什么内容。 index.wxml: <view bin
阅读全文
摘要：经过之前的文章介绍，我们已经知道了，在事件当中如何进行数据的传递，那么在介绍当中有两种传递方式，那么这两种方式分别有什么区别呢，我们一起来看看吧~ 我们先来看一个情况，就是看一下在元素结构有嵌套与无嵌套情况下我们拿到的currentTatget与target分别拿到的是那个元素信息。 如果不存在嵌套
阅读全文
摘要：事件对象 小程序在触发事件监听方法的时候会自动传递一个事件对象给我们，通过这个事件对象我们可以拿到页面传递过来的一些数据。 事件对象的作用 拿到触发事件的元素: currentTarget 拿到触发事件的位置: detail 拿到从页面传递过来的数据: dataset/mark 页面传递数据的方法
阅读全文
摘要：!> 小程序当中的时间捕获与时间冒泡与原生JS的是一样的 这里我就来直接上代码来演示一下在微信小程序当中的时间冒泡与捕获，关于时间的捕获与冒泡可以参考我JS文章里面的介绍即可。 事件捕获 index.wxml: <view class="one" capture-bind:tap="onOneCli
阅读全文
摘要：什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息，如 id, dataset, touches。 常见事件 tap：手指触摸后马上离开 longpress：手
阅读全文
摘要：一句话带过，大胆的写你的JS代码，如果发现报错了不行了，在查看官方文档的语法参考文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/
阅读全文
摘要：在上一章当中，我们将 WXS 的内容与 WXML 混合在一起了，这样就导致了我们后期的不利于维护，这里一期当中我来介绍一下，如何将 WXS 内容编写到一个单独的 WXS 文件进行存储，然后与 WXML 进行分离。 在页面文件夹当中新建 index.wxs 文件: function formartDa
阅读全文
摘要：官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/ 什么是 WXS WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。 !> 注意事项： WXS 不依赖于运
阅读全文
摘要：!> <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性，条件渲染默认只能控制被添加条件属性的那个组件，如果多个组件需要同时被控制，我们就可以使用 block，普通的组件上可能需要添加很多属性，如果再把条件渲染或者列表渲染同时添加到上面会导致我们代码的可读
阅读全文
摘要：wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一标识符。 wx:key 的值以两种形式提供： 字符串：代表在 for 循环的 ar
阅读全文
摘要：WXML 中的列表渲染 在组件上使用 wx:for 控制属性绑定一个数组/数字/字符串, 即可使用数组中各项的数据重复渲染该组件，wx:for 默认自动将当前遍历到的数据放到 item 变量中，会自动将当前遍历的索引放到index变量中，如果想修改保存数据的变量名称，或修改保存索引的变量名称，我们可
阅读全文
摘要：默认组件，只要被书写出来，都会渲染到界面上。 wx:if 在框架中，使用 wx:if="" 来判断是否需要渲染该代码块： index.wxml: <view wx:if="{{condition}}"> True </view> index.js: // pages/index/index.js P
阅读全文
摘要：WXML 如何绑定数据 企业开发中大部分数据不是直接写死在界面中的，而是在程序运行的过程中动态从服务器获取的 将可变化的数据动态渲染到界面上，我们称之为绑定数据 在小程序中，所有需要动态绑定数据的地方，都需要使用 Mustache 语法 {{ 需要绑定的数据 }} 在微信小程序当中，绑定数据分以下几
阅读全文
摘要：什么是WXML WXML（WeiXin Markup Language）是框架设计的一套标签语言，类似于HTML，结合基础组件、事件系统，可以构建出页面的结构。 要完整了解 WXML 语法，请参考WXML 语法参考。 特点 严格区分大小写 正确示例： <text>严格区分大小写</text> 错误示
阅读全文
摘要：hidden 属性 在 Vue 中我们可以通过 v-show 来控制组件是否显示 在小程序中所有组件都支持hidden属性，我们可以通过hidden属性来控制组件是否显示隐藏 wx:if和hidden的区别 和 Vue 中 v-if/v-show 一样，不经常切换使用 v-show(wx:if)，经
阅读全文
摘要：!> 在企业开发中，拿到设计师设计的750设计图之后，我们只需要将模拟器调整为 iphone6，然后将设计图上标注的 px 乘以2，写到样式中，单位使用 rpx 即可。 关于更多的关于响应式的内容可查看我之前介绍响应式单位的文章： https://www.cnblogs.com/BNTang/tag
阅读全文
摘要：行内样式 <view style="color: red;">行内样式</view> 页面样式 编写在当前页面文件夹当中的 WXML 的 WXSS 文件当中： index.wxss: .pageStyle { color: pink; } index.wxml: <view class="pageS
阅读全文
摘要：什么是 WXSS WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及
阅读全文
摘要：关于小程序组件的部门内容，我们先介绍这里，我们在回到我们的微信小程序的配置文件刨铣最后一个文件，这里就算彻底的入了个小门，本章介绍的是 project.config.json 文件的配置含义： 官方文档：https://developers.weixin.qq.com/miniprogram/dev
阅读全文
摘要：经过上一章节的介绍，我们知道了在微信小程序当中组件的.json文件的作用其含义之后，本文将继续来刨铣组件当中的每一个文件的作用其含义，这次介绍的是组件当中的 .js 文件。 其实呢这个js文件你自己结合我们之前讲解过来的这么多内容了你应该也是可以猜得出这个是用来监听组件的生命周期和组件的数据存储逻辑
阅读全文
摘要：经过上一章节的介绍，我们知道了在微信小程序当中组件的创建与使用，本文将继续来刨铣组件当中的每一个文件的作用其含义，这次介绍的是组件当中的 .json 文件。 .json 官方文档的介绍地址：https://developers.weixin.qq.com/miniprogram/dev/framew
阅读全文
摘要：经过上一章的介绍我们就知道了页面当中的.js文件是当前页面的生命周期与数据存储的逻辑文件，本文将开始来带着友友们来了解下微信小程序当中的组件的创建与使用方式。 创建 首先在工程当中创建一个 components 文件夹，然后在当中创建一个 demo 组件，鼠标右键 components 文件夹新建
阅读全文
摘要：经过上一章的页面.json文件的介绍，我们知道了页面的.json文件可以覆盖全局文件的配置项。本章主要讲解一下页面目录当中下的.js文件，该文件主要作用于页面的数据管理和生命周期。 官方文档：https://developers.weixin.qq.com/miniprogram/dev/refer
阅读全文
摘要：经过之前的 app.wxss 文件的介绍，知道了该文件的内容是设置的全局的样式文件，那么本文将开始逐一的介绍关于 页面 的配置项。 .json 文件 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 每一个小程
阅读全文
摘要：经过我们上一章的介绍 app.js 文件之后我们知道了这个文件可以监听小程序的生命周期与存放一个全局的使用数据，那么接下来我们在来看关于微信小程序的全局的文件 app.wxss （全局样式文件）。 app.wxss 要演示这个全局样式首先我们要有多个页面，创建一个 log 页面： 然后发现我们创建完
阅读全文
摘要：经过我上一章的讲解 sitemap.json 文件的作用之后我们就明白了，这个文件主要的作用就是给微信小程序进行 SEO 检索爬虫进行使用的，我们可以让需要的页面开放出去，不需要开放的我们禁用即可，可以有很多检索文件的规则等等，本文将介绍一下 app.js 这个文件的作用与含义。 App.js 一样
阅读全文
摘要：好了经过我们上一章关于 app.json 的介绍我们已经知道了一个微信小程序的启动，必须要包含一个 app.json 文件，那么我们有没有发现一个问题，那么就是，我们并没有 app.js，app.wxss，说明这两个文件不是必须的，app.json 才是必须的，那么那两个文件什么时候才进行使用呢，只
阅读全文
摘要：关于本文主要介绍一下我们之前文章当中创建的第一个微信小程序当中的 app.json 文件它自带的默认配置项是何含义，首先创建一个全新的小程序项目，然后将其所有文件进行删除： 会发现提示你，app.json 未找到说明一个问题微信小程序会自动的去寻找有一个 app.json 的文件进行读取，然后我们来
阅读全文
摘要：打开微信开发者工具： 新建项目： 使用小程序管理员微信, 扫码登录开发者工具： 使用申请到的AppID创建一个小程序： 利用微信开发工具开始开发: 除了利用微信开发者工具可以开发微信小程序以外, 其实通过VSCode/WebStorm等主流开发者工具也能开发微信小程序, 只不过需要简单的配置一下,
阅读全文
摘要：什么是微信小程序 微信小程序是腾讯2017年1月9日正式上线的一种基于微信的无需安装的应用程序 什么是基于微信? 简单粗暴的理解就是运行在微信中的应用程序, 如果没有安装微信则不能运行 什么是无需安装? 无需安装只是宣传噱头, 本质上小程序也是需要下载安装的，只不过微信官方对小程序安装的大小有严格的
阅读全文
