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