![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序
文章平均质量分 65
微信小程序
花铛
这个作者很懒,什么都没留下…
展开
-
微信小程序使用 MoxB 实现全局状态管理
在小程序根目录下新建 文件,创建 MobX Store。使用 MobX Store:将页面、自定义组件和 store 绑定有两种方式: behavior 绑定和手工绑定 。手工绑定: 使用 createStoreBindings 创建绑定,它会返回一个包含清理函数的对象用于取消绑定。无论使用哪种绑定方式,都必须提供一个绑定配置对象。这个对象包含以下字段:原创 2022-11-27 21:04:07 · 792 阅读 · 0 评论 -
《十八》微信小程序中使用第三方包
微信小程序支持使用 npm 安装第三方包。之后使用组件的时候将会去。目录下的包构建生成到。原创 2022-11-27 12:56:31 · 1760 阅读 · 2 评论 -
微信小程序自定义图片上传组件
【代码】微信小程序自定义图片上传组件。原创 2022-11-22 15:03:19 · 1591 阅读 · 2 评论 -
微信小程序实现底部操作栏
底部操作栏会遮挡页面底部一部分的内容,可以通过给这部分内容设置和底部操作栏一样高度的。底部操作栏实现功能:悬浮于页面底部。原创 2022-11-18 14:56:59 · 2160 阅读 · 0 评论 -
《十二》微信小程序中组件间通信
自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件。// 子组件 searchInput.wxml// 子组件 searchInput.jsmethods: {// 自定义组件触发事件时,需要使用 triggerEvent 方法指定事件名、detail 对象和事件选项。this.triggerEvent('confirmSearch', {value: '我是输入的值'}, {});})// 引用自定义组件的页面 index.wxml。原创 2022-11-05 12:38:15 · 1405 阅读 · 0 评论 -
微信小程序实现 swiper 滑块
【代码】微信小程序实现 swiper 滑块。原创 2020-10-29 13:56:35 · 4920 阅读 · 2 评论 -
《十四》微信小程序中的常用 API 之登录、获取手机号、获取用户的昵称和头像、转发给朋友、转发到朋友圈、订阅消息、客服消息、支付、提现
微信小程序提供了 wx 这个全局变量,通过这个全局变量可以调用微信小程序提供的 API。原创 2021-05-13 16:33:37 · 5041 阅读 · 1 评论 -
《三》微信小程序中的 WXSS
WXSS 用于描述页面的样式,页面样式有三种写法,优先级为。全局样式:定义在app.wxss中的样式为全局样式。作用于全局,在小程序内的任意一个页面中都会生效。页面样式:在页面的 wxss 文件中定义样式;在页面的组件上使用 class 属性来指定样式规则。只作用在对应的页面,只在对应的页面中生效。行内样式:在页面的组件上使用 style 属性来控制样式。要尽量避免将静态的样式写进 style 中,以免影响渲染速度。不支持\n的换行,可以添加 css 属性来让其支持;但是是支持的。原创 2020-10-28 15:52:09 · 1070 阅读 · 1 评论 -
微信小程序实现原生导航栏和自定义头部导航栏
因为不同的手机型号头部导航栏高度可能不一致,所以为了适配更多型号,需要动态计算导航栏的高度。状态栏的高度可以通过获取。胶囊按钮的信息可以通过获取。所以导航栏高度=状态栏高度+胶囊按钮的高度+(胶囊按钮距离顶部的距离-状态栏的高度)*2。由于胶囊按钮是原生组件,为表现一致,其单位在各个系统都为 px,所以自定义导航栏高度的单位都必须是 px,才能完美适配。原创 2020-10-28 18:13:44 · 9968 阅读 · 3 评论 -
《六》微信小程序中的事件
我是事件传递自定义参数原创 2020-10-29 09:34:33 · 740 阅读 · 1 评论 -
《四》微信小程序中的 JSON 配置
app.json微信小程序的很多开发需求都被规定在了配置文件中。原创 2020-10-29 09:48:48 · 1118 阅读 · 0 评论 -
《七》微信小程序中的 App()
用来注册一个小程序。接受一个 Object 参数,其中指定小程序级别的生命周期函数和通用的数据、方法等。App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。生命周期函数指的是在某一时刻会自动执行的函数。Object 参数:onLaunch(options):生命周期函数,小程序初始化完成时触发,全局只触发一次。options 中包含小程序当前所在页面的路径、进入小程序携带的参数、进入小程序的场景值等。原创 2021-05-13 15:39:56 · 862 阅读 · 0 评论 -
《八》微信小程序中的 Page()
Page()原创 2020-10-29 10:44:07 · 4428 阅读 · 1 评论 -
微信小程序页面之间传递数据
跳转时将数据使用?拼接在 URL 后面;在另一个页面的 onLoad() 方法的参数中即可获取到传递的参数。微信小程序对路由传参的大小有限制。接收数据的页面获取到的都是字符串。也就是说,即使传递数据的页面传递的参数是布尔值或者数值,到了接收数据的页面获取到的也都是字符串。如果数据中有?等特殊字符,微信会做截取。解决方法:利用 encodeURIComponent() 和 decodeURIComponent() 对要传递的数据进行编解码。原创 2020-11-02 16:45:34 · 6495 阅读 · 1 评论 -
微信小程序实现顶部标签栏
【代码】微信小程序实现标签栏。原创 2020-11-02 17:06:59 · 2733 阅读 · 0 评论 -
解决微信小程序app.js中异步请求尚未执行完成,就执行Page页面请求的问题
问题描述:在app.js中执行login请求获取token,home.js中的请求会出现不带token的情况。原因:app.js中的login请求是异步操作,所以会出现执行home.js中请求的时候,login请求还未执行完成,因此获取不到token。解决方法:在app.js中使用Promise;在home.js判断Promise的状态,已完成时再去执行页面的请求。//app.jswxLogin(){ return new Promise((resolve,reject)=>{原创 2020-11-03 10:57:42 · 3388 阅读 · 1 评论 -
微信小程序实现原生 tabbar 和自定义 tabbar
配置信息:在app.json中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配置项需完整声明,但这些字段不会作用于自定义 tabBar 的渲染。{"text": "首页"}, {"text": "日志"}]},}原创 2020-11-10 17:59:15 · 1003 阅读 · 0 评论 -
微信小程序骨架屏
骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。在小程序中,需要手工维护骨架屏的代码,当业务变更时,同样需要对骨架屏代码进行调整。微信开发者工具提供了自动生成骨架屏代码的能力。骨架屏仅包括页面首屏中的可见区域,对于横向滚动的 swiper 等容器,超出屏幕的子元素将被忽略。原创 2020-11-20 16:22:14 · 442 阅读 · 0 评论 -
《十一》微信小程序中自定义组件的 Component()
Behavior():注册一个 behavior,接受一个 Object 类型的参数。// 定义 behavior// 引入的其它 behavior// 属性},// 数据data: {},// 数据字段监听器// 生命周期声明对象// 所在页面的生命周期声明对象// 方法methods: {})自定义组件扩展其实就是提供了修改自定义组件定义段的能力。Behavior() 构造器提供了新的定义段 definitionFilter ,用于支持自定义组件扩展。原创 2020-11-23 17:27:34 · 6438 阅读 · 1 评论 -
微信小程序 web-view 访问外部链接
承载网页的容器,会自动铺满整个小程序页面。访问的外链运行在微信内置的浏览器上,会存在缓存问题,有可能导致无法访问到最新的页面。webview 中导航栏的标题是取的页面标签的内容。原创 2020-11-27 18:05:08 · 31903 阅读 · 8 评论 -
《十七》微信小程序中的插件
插件是对一组 js 接口、自定义组件或页面的封装,用于嵌入到小程序中使用。插件不能独立运行,必须嵌入在其他小程序中才能被用户使用;而第三方小程序在使用插件时,也无法看到插件的代码。因此,插件适合用来封装自己的功能或服务,提供给第三方小程序进行展示和使用。相对于普通 js 文件或自定义组件,插件拥有更强的独立性,拥有独立的 API 接口、域名列表等,但同时会受到一些限制,如 一些 API 无法调用或功能受限。还有个别特殊的接口,虽然插件不能直接调用,但可以使用插件功能页来间接实现。原创 2020-12-30 11:49:34 · 11052 阅读 · 1 评论 -
《十三》微信小程序中常用的内置组件
同层渲染是为了解决原生组件的层级问题,在支持同层渲染后,原生组件与其它组件可以随意叠加,有关层级的限制将不再存在。在表单中的组件上加上 name 来作为它的 key,在 submit 或 reset 绑定的事件处理函数中就可以获取到表单中的组件的 value 值。在工具上,原生组件是用 web 组件模拟的,因此很多情况并不能很好的还原真机的表现,建议在使用到原生组件时尽量在真机上进行调试。微信小程序中的组件分为原生组件和非原生组件。大部分都是非原生组件,少部分是由微信客户端创建的原生组件。原创 2021-01-21 18:55:27 · 2622 阅读 · 2 评论 -
《十六》微信小程序中的分包
某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。原创 2021-04-02 18:39:17 · 5470 阅读 · 1 评论 -
微信小程序中使用富文本插件 wxParse
github下载地址:https://github.com/icindy/wxParse下载完成后,复制文件夹wxParse到项目目录中(例如放在utils目录中).在需要使用的JS文件中引入wxParse.js文件。var WxParse = require('../../utils/wxParse/wxParse.js');在CSS文件中引入样式文件.@import "./...原创 2019-03-26 17:01:54 · 817 阅读 · 1 评论 -
微信小程序中使用图表插件 wx-charts
基于canvas 绘制,支持图表类型(饼图 pie、圆环图 ring、线图 line、柱状图 column、区域图 area、雷达图 radar)。原创 2019-03-26 17:38:44 · 1507 阅读 · 1 评论 -
《十五》微信小程序中常用的 API 之网络请求、弹框、导航、跳转小程序、打开 APP、媒体、地理位置
微信小程序中的服务器域名只支持 https 和 wss,不支持 http 和 IP 地址。微信小程序只能和指定的域名进行通讯,必须要在中设置域名,否则的话将无法发送网络请求。详情 -- 本地设置。原创 2019-10-29 11:29:55 · 1894 阅读 · 1 评论 -
微信小程序实现下拉刷新首页数据、上拉加载下一页数据
原因:之前的页面可能是未被销毁,仍然在页面栈中,因此切换回来之后还保持之前的状态。解决方法:切换回来页面之后,首先清空。滚动条没有回到顶部的情况。切换页面,可能会出现。原创 2020-02-27 16:58:05 · 4659 阅读 · 0 评论 -
《十》微信小程序中自定义组件的组件模板、组件样式和 JSON 配置
这段文本的颜色局部引用了组件所在页面的样式原创 2020-03-03 12:00:20 · 7759 阅读 · 1 评论 -
《一》微信小程序基础
是一种不需要下载安装即可使用的应用。原创 2020-10-19 11:30:14 · 4624 阅读 · 1 评论 -
微信小程序通过 useExtendedLib 的方式引入 WeUI 组件库
开发的小程序扩展组件库,同微信原生视觉体验一致。支持扩展库引入,不占用小程序包体积。WeUI 组件库是一套基于样式库。原创 2020-10-22 10:06:07 · 1788 阅读 · 1 评论 -
微信小程序引入扩展组件库
文档:https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/以tabs为例:引入组件:npm i @miniprogram-component-plus/tabs--save;微信开发者工具点击详情,勾选使用npm模块;微信开发者工具点击工具–>构建npm;在页面的页面 json 文件中加入 usingComponents 字段;{ "usingComponents": { "mp-t原创 2020-10-22 11:04:43 · 2190 阅读 · 1 评论 -
《九》微信小程序中的自定义组件
自定义组件:可复用的 WXML、WXSS、JS、JSON。behavior:可复用的组件 JS(属性、数据、生命周期函数和方法等)。wxs:可复用的普通 JS。template 模板:可复用的 WXML。自定义组件类似于页面,也是由 wxml、wxss、json、js 4个文件组成。在 json 文件中进行自定义组件声明:将 component 字段设为 true 可将这一组文件设为自定义组件。在 wxml 文件中编写组件模板;在 wxss 文件中编写组件样式;在 js 文件中使用。原创 2020-10-23 09:52:01 · 2401 阅读 · 1 评论 -
《五》微信小程序中的 JS
微信小程序中是通过 JavaScript 来正常处理逻辑。原创 2020-10-26 18:14:34 · 3095 阅读 · 1 评论 -
《二》微信小程序中的 WXML
双向绑定同样可以使用在自定义组件上。})当自定义组件的输入框的值变更时,自定义组件的 transferValue 属性会同时变更,页面的也会同时变更,页面 WXML 中所有绑定了 pageValue 的位置也会被一同更新。在内定义代码片段,使用 name 属性,作为模板的名字。原创 2020-10-28 15:51:13 · 1963 阅读 · 1 评论 -
微信小程序真机问题
解决方法:如果是想监听 bindscrolltolower 事件,可以通过将 的数值设置得大一些;如果是想监听 bindscroll 事件,暂时没有解决方法。解决方法:使用 替代 。解决方法:可以在 或者 中设置 backgroundColor/backgroundColorTop/backgroundColorBottom。例如:如果不处理 IOS 底部安全距离兼容的问题,那么 iPhone X 之后的苹果机型将会出现底部操作栏被底部横条遮挡的问题。解决方法:创建一个安全距离的自定义组件,原创 2022-01-25 15:11:07 · 1402 阅读 · 0 评论