微信小程序
关注
分享
扫一扫
文章平均质量分 83
参考：2022黑马程序员前端微信小程序开发教程 编写
内容：很基础，适合刚开始学习小程序的同学
不爱编程的小白白
新星计划导师，全栈领域优质创作者，阿里云专家博主，CSDN内容合伙人，成长一夏挑战赛-优秀领军人物，创作之秋挑战赛-优秀领军人物。
展开
-
【微信小程序】页面事件
小程序默认的触底距离是50px，在实际开发中，可以根据自己的需求修改这个默认值。在页面的.json配置文件中，将enablePullDownRefresh设置为true。navigator组件的url属性用来指定将要跳转到的页面的路径。当处理完下拉刷新后，下拉刷新的loading效果会一直显示，是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而。是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而。可以在全局或页面的.json配置文件中，通过。...原创 2022-07-29 23:57:42 · 1159 阅读 · 47 评论 -
【微信小程序】页面导航
在使用组件跳转到普通的非tabBar页面时，则需要指定。在使用组件跳转到指定的tabBar页面时，需要指定。方法，可以跳转到非tabBar的页面。返回的页面数，如果delta大于现有页面数，则返回到首页。需要跳转的tabBar页面的路径，路径后不能带参数。需要跳转的tabBar页面的路径，路径后不能带参数。方法，可以返回上一页面或多级页面。注意为了简便，在导航到非tabBar页面时，调用小程序的导航API，实现页面的跳转。...原创 2022-07-24 23:33:50 · 601 阅读 · 3 评论 -
【微信小程序】案例 - 本地生活
首页效果以及实现步骤① 新建项目并梳理项目结构② 配置导航栏效果③ 配置 tabBar 效果④ 实现轮播图九宫格效果原创 2022-07-22 23:31:23 · 4619 阅读 · 78 评论 -
【微信小程序】课程表案例--0基础版
🧊完整代码链接https//pan.baidu.com/s/11Dy2_0MUreyynIeIQNOdsg。后端服务选择腾讯云开发（wx小程序会免费给你送服务器）就是代表星期几，1就是代表周一，2代表周二，一次推类。代表占几个课时，说白了就是长方形的高度。注意看黑框所包围的东西这些是重点。负责展示的颜色，id不同颜色不同。找到tsj.js并点击打开。就是你刚刚解压文件的路径。...原创 2022-07-17 23:38:22 · 2523 阅读 · 21 评论 -
【微信小程序】页面配置，网络数据请求
当前页面下拉loading的样式，仅支持dark/light。小程序中，每个页面都有自己的.json配置文件，用来对。小程序中，app.json中的window节点，可以。当前页面导航栏标题颜色，仅支持black/white。页面上拉触底事件触发时距页面底部距离，单位为px。需求描述假设在自己的微信小程序中，希望请求。④服务器域名一个月内最多可申请5次修改。🥦2.配置request合法域名。①域名只支持https协议。修改request合法域名。...原创 2022-07-16 00:50:18 · 5062 阅读 · 124 评论 -
【微信小程序】全局配置 - tabBar
目录全局配置 - tabBar1. 什么是 tabBar2. tabBar 的 6 个组成部分3. tabBar 节点的配置项4. 每个 tab 项的配置选项全局配置 - 案例：配置 tabBar1. 需求描述2. 实现步骤3. 步骤1 - 拷贝图标资源 4.步骤2 - 新建 3 个对应的 tab 页面5. 步骤3 - 配置 tabBar 选项6. 完整的配置代码 通过 app.json 文件的 pages 节点，快速新建 3 个对应的 tab 页面，示例代码如下：其中，home 是首页，messa原创 2022-07-10 22:35:54 · 17515 阅读 · 79 评论 -
【微信小程序】全局配置
目录全局配置文件及常用的配置项全局配置 - window1. 小程序窗口的组成部分2. 了解 window 节点常用的配置项 3. 设置导航栏的标题4. 设置导航栏的背景色 5. 设置导航栏的标题颜色6. 全局开启下拉刷新功能7. 设置下拉刷新时窗口的背景色8. 设置下拉刷新时 loading 的样式 9. 设置上拉触底的距离 注意： backgroundTextStyle 的可选值只有 light 和 dark...原创 2022-07-10 22:04:58 · 5894 阅读 · 91 评论 -
【微信小程序】WXSS 模板样式
目录🍓WXSS 模板样式1. 什么是 WXSS2. WXSS 和 CSS 的关系🍒WXSS 模板样式 - rpx2. rpx 的实现原理3. rpx 与 px 之间的单位换算（了解）🍊WXSS 模板样式 - 样式导入1. 什么是样式导入2. @import 的语法格式🍘WXSS 模板样式 - 全局样式和局部样式1. 全局样式2. 局部样式 2. 局部样式 在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。 注意： ① 当局部样式和全局样式冲突时，...原创 2022-07-02 21:59:24 · 2173 阅读 · 79 评论 -
【微信小程序】条件渲染 列表渲染 原来这样用？
目录WXML 模板语法 - 条件渲染🍊1. wx:if🍋2. 结合 使用 wx:if🍉3. hidden🍓4. wx:if 与 hidden 的对比WXML 模板语法 - 列表渲染🥭1. wx:for🍍2. 手动指定索引和当前项的变量名🥝3. wx:key 的使用也可以用 wx:elif 和 wx:else 来添加 else 判断：js：因为type的值为1，所以： 例如：WXML:JS和上面的一样效果： hidden 中 false 表...原创 2022-06-28 23:49:48 · 2110 阅读 · 95 评论 -
【微信小程序】事件绑定，你搞懂了吗？
目录WXML 模板语法 - 事件绑定🍅1. 什么是事件🍒2. 小程序中常用的事件🥭3. 事件对象的属性列表🍍4. target 和 currentTarget 的区别🍊5. bindtap 的语法格式🍓6. 事件处理函数中为数据赋值🥕7. 事件传参🧅8. bindinput 的语法格式🎨9. 实现文本框和 data 之间的数据同步 target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。举例如下： ② 在页面的 .js 文件中...原创 2022-06-26 00:21:50 · 7425 阅读 · 121 评论 -
【微信小程序】协同工作和发布 数据绑定
① 点击开发者工具顶部工具栏中的“上传” 按钮 这是默认的index页面： 新建一个页面，打开js文件 WXML:WXSS: 效果：WXSS: 效果： 页面的结构如下： 生成的随机数为：97.50952738069331>50 算术运算页面的数据如下：页面的结构如下：...原创 2022-06-21 08:45:00 · 2716 阅读 · 129 评论 -
【微信小程序】image组件 API 协同工作和发布
WXML:WXSS:通过边框线证明image 有默认的宽和高image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下： aspectFit： widthFix：原创 2022-06-15 23:42:05 · 870 阅读 · 75 评论 -
【微信小程序】按钮还能这样用？
目录🍓button 按钮的基本使用🍉各种神奇的按钮通过type属性指定按钮颜色类型 WXML:注：后期会对按钮添加事件，现在只是给大家演示一下按钮的类型小尺寸按钮 去这里找按钮的样式，然后复制：Buttons - copy CSS & HTML! (uiverse.io) WXML:WXSS: WXML:WXSS:...原创 2022-06-13 23:24:54 · 4922 阅读 · 96 评论 -
【微信小程序】滚动 轮播图 文本
目录🍒小程序的宿主环境 - 组件1.scroll-view 组件的基本使用2.swiper 和 swiper-item 组件的基本使用3.text 组件的基本使用4.rich-text 组件的基本使用 scroll-y 改成 scroll-x实现如图的横向滚动效果： 文本组件类似于 HTML 中的 span 标签，是一个行内元素通过 text 组件的 selectable 属性，实现长按选中文本内容的效果：...原创 2022-06-08 22:55:43 · 8015 阅读 · 103 评论 -
【微信小程序】宿主环境 通信模型 运行机制 组件
目录🍓小程序的宿主环境 - 宿主环境简介1. 什么是宿主环境2. 小程序的宿主环境3. 小程序宿主环境包含的内容🍍小程序的宿主环境 - 通信模型1. 通信的主体2. 小程序的通信模型🥦小程序的宿主环境 - 运行机制🍒小程序的宿主环境 - 组件1. 小程序中组件的分类2. 常用的视图容器类组件3. view 组件的基本使用实现如图的 flex 横向布局效果： WXML:微信小程序的view和HTML的div效果一样WXSS:...原创 2022-06-06 23:33:37 · 774 阅读 · 74 评论 -
【微信小程序】WXML WXSS JS
目录🍓小程序代码的构成 - WXML 模板1. 什么是 WXML2. WXML 和 HTML 的区别🍇小程序代码的构成 - WXSS 样式1. 什么是 WXSS2. WXSS 和 CSS 的区别🍒小程序代码的构成 - JS 逻辑交互1. 小程序中的 .js 文件2. 小程序中 .js 文件的分类🍓小程序代码的构成 - WXML 模板1. 什么是 WXML WXML（WeiXin Markup Language）是小程序框架设计的一套标签语原创 2022-06-01 06:45:00 · 1938 阅读 · 72 评论 -
【微信小程序-0基础入门】小程序代码的构成
目录🍍小程序代码的构成-项目结构🍑小程序代码的构成 - JSON 配置文件🍰1. JSON 配置文件的作用🍔2. app.json 文件🍅3. project.config.json 文件🍈4. sitemap.json 文件🧅5. 页面的 .json 配置文件🌮6. 新建小程序页面🧁7. 修改项目首页个人主页：个人主页系列专栏：系列专栏【微信小程序】🍍小程序代码的构成-项目结构🧀1. 了解项目的基本组成结构🥞2. 小程序页面的组成部分🍑小原创 2022-05-30 06:45:00 · 811 阅读 · 25 评论 -
【微信小程序-0基础入门】项目发布完整流程
写在前面：上一节讲述了小程序的相关介绍以及账号注册，这一节讲述小程序发布的具体流程。目录🍓安装开发者工具🍒小程序项目发布流程🍍小程序代码的构成-项目结构🧀1. 了解项目的基本组成结构🥞2. 小程序页面的组成部分🍑小程序代码的构成 - JSON 配置文件🍰1. JSON 配置文件的作用🍔2. app.json 文件🍅3. project.config.json 文件个人主页：个人主页系列专栏：系列专栏【微信小程序】🍓安装开发者工具微信开发原创 2022-05-29 10:03:56 · 5941 阅读 · 99 评论 -
【微信小程序-0基础入门】相关介绍和账号注册
写在前面：本篇内容，主要介绍小程序的“相关知识”以及“如何注册微信小程序”账号。后续内容会慢慢教大家如何一步步写出属于自己的小程序。目录1.小程序是什么？2.小程序的由来3.小程序的主要特点4.小程序的主要应用场景5.小程序与 公众号 APP 对比5.如何开启创作之路？6.学习微信小程序，需要具备那些基础？1.小程序是什么？小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即.原创 2022-05-27 19:48:42 · 3260 阅读 · 66 评论