小程序
文章平均质量分 67
harmsworth2016
这个作者很懒,什么都没留下…
展开
-
【Vue和微信小程序】为什么Vue组件中data是一个函数,而小程序中data是一个对象表达式
为什么Vue组件中data是一个函数,而小程序中data是一个对象前言Vue组件脚本模板小程序Component构造器定义组件Page构造器注册页面总结前言日常工作中经常使用 Vue 和 小程序,对于Vue组件中data是一个函数,能够理解,但不够深入,小程序中data是一个对象更是百思不得其解,细细思考,偶有所得。Vue组件脚本模板export default { components: { }, mounted () { }, computed: { }, //原创 2022-04-27 16:50:03 · 538 阅读 · 0 评论 -
微信小程序遇到的棘手问题
微信小程序遇到的棘手问题深层页面返回浅层页面前言ios系统横屏页面跳转竖屏页面前言总结深层页面返回浅层页面前言最近做小程序遇到一个页面跳转的问题,很是让人伤脑筋。问题描述如下:从第 6 层页面既可以返回第 2 层页面,又可以返回第 5 层页面。而且,第 2 层页面既可以打开第 6 层页面,又可以打开 第 3 层页面。目前在小程序中用到最多的是 wx.navigateTo和 wx.navigateBack刚开始尝试了如下 2 种操作:从第 6 层页面如果直接使用 wx.navigateT原创 2021-06-29 21:36:09 · 574 阅读 · 0 评论 -
微信小程序navigateTo和redirectTo交替使用报错navigateTo:fail webview count limit exceed
navigateTo:fail webview count limit exceed前言步骤代码报错原因建议前言小程序的头部默认使用 wx.navigateBack 关闭当前页面,返回上一页面或多级页面。然后在自定义小程序头部后,返回按钮可以调用其他API。当 wx.navigateTo 和 wx.redirectTo 交替反复使用时,报错 navigateTo:fail webview count limit exceed。您可以点击小程序代码片段 minicode-27步骤在小程序用 a 页原创 2021-06-26 15:37:45 · 722 阅读 · 0 评论 -
微信小程序苹果手机statusBarHeight状态栏高度为0
statusBarHeight状态栏高度前言安卓手机竖屏statusBarHeight横屏statusBarHeight苹果手机竖屏statusBarHeight横屏statusBarHeight总结前言最近在做小程序横屏页面时,发现刘海屏头部挡住了左侧页面部分内容,遂将刘海屏挤占部分腾出来,页面向右整体挪动,然安卓手机和苹果手机显示的页面不一致,苹果手机横屏statusBarHeight为0。设计稿大概效果如下:安卓手机竖屏statusBarHeight横屏statusBarHeight原创 2021-01-06 11:54:34 · 4625 阅读 · 0 评论 -
微信小程序竖屏横屏切换展示效果
竖屏横屏切换竖屏效果代码横屏效果代码总结竖屏效果代码<!-- index.html --><view class="rect submit_btn flexbox_auto" id="btn" style="top:{{top}}px;left:{{left}}px;" bindtap="onSubmit" bindtouchmove="onTouchmove" bindtouchstart="onTouchStart"> 提交</view>// i原创 2021-01-02 11:35:11 · 4355 阅读 · 0 评论 -
微信小程序boundingClientRect取不到值
boundingClientRect前言前言微信小程序 boundingClientRect 取不到值,在官方文档中有解决办法。故代码如下:ready: function () { wx.createSelectorQuery().in(this).select('#id').boundingClientRect(function(res){ console.log(res) }).exec()}...原创 2020-12-31 18:12:56 · 3649 阅读 · 1 评论 -
微信小程序丝柔顺滑般拖拽元素的2种方式
小程序拖拽元素前言代码总结前言今天做小程序拖拽元素的功能,在小程序文档中发现了用于拖拽元素的组件 movable-area 和 movable-view。演示如下:代码<!-- index.html --><movable-area> <movable-view x="{{x}}" y="{{y}}" direction="all"> <view class="rect submit_btn flexbox_auto" bindtap="o原创 2020-12-30 23:09:19 · 5547 阅读 · 1 评论 -
我发现miniprogram-computed的一个隐藏彩蛋
使用miniprogram-computed前言前言今天在写微信小程序用到 miniprogram-computed 这个扩展框架,这个扩展框架是小程序官方推荐的。再次碰到了一个很奇怪的问题,如下所示。原创 2020-12-15 15:28:50 · 504 阅读 · 0 评论 -
最全面的微信小程序渲染图片的方式
渲染图片前言1、正常渲染图片2、使用 `rich-text` 渲染 `html` 字符串前言在小程序中渲染图片时,对于大图会出现图片比例失调的问题,小程序的文档中有如下介绍image1、正常渲染图片在开发者工具中调试<!-- imagetest.wxml --><view class="con"> <view>未使用mode</view> <view> <image src="/public/img/big原创 2020-11-22 14:06:39 · 6009 阅读 · 0 评论 -
微信小程序开启分享的2种方式
微信小程序开启分享前言使用Page页面效果全局分享单页面分享使用Component组件全局分享单页面分享总结前言最近做微信小程序分享给使用Page页面效果全局分享// app.js!function(){ var PageTmp = Page; Page = function (pageConfig) { // 设置全局默认分享 pageConfig = Object.assign({ onShareAppMessage:function () {原创 2020-10-24 22:28:50 · 5258 阅读 · 6 评论 -
最简单的微信小程序封装ajax
封装ajax前言代码前言使用小程序的 API wx.request 调用接口时,总是没有 Promise 用得顺手,何不将 wx.request 封装成返回一个 Promise 的函数,说干就干。代码const DEFAULT_HEADER = { 'content-type': 'application/json',}// 接口所在域名const BASE_URL = 'http://localhost:3000'// wx.getStorageSync("sessionid") 登录原创 2020-09-25 12:17:17 · 473 阅读 · 0 评论 -
微信小程序页面上下滚动、左右滑动(二)
系列文章目录微信小程序页面上下滚动、左右滑动(一)文章目录系列文章目录前言项目结构解决问题11.pretest页面2.test页面解决问题2总结参考前言在上一篇文章,讲解了再微信小程序中如何实现页面上下滚动、左右滑动。但是,此处有2个缺陷。当有多少个可以滑动的页面时,就会渲染多少个组件当快速的左右滑动时,swiper 会出现卡死(无限循环滑动)的现象那么我们可以考虑在每次渲染 swiper-item 时,最多渲染 3 个,动态生成可滑动的页面,于是就做出了如下效果的页面。最多只有 3 个原创 2020-09-20 00:15:29 · 9396 阅读 · 0 评论 -
微信小程序最全面Component组件生命周期
Component组件生命周期使用miniprogram-computed参考const app = getApp()Component({ behaviors: [require('miniprogram-computed')], /** * 使用全局样式属性 */ options: { addGlobalClass: true }, /** * 组件的属性列表 */ properties: { }, /** * miniprog原创 2020-09-18 23:18:45 · 3175 阅读 · 0 评论 -
微信小程序页面上下滚动、左右滑动(一)
页面上下滚动、左右滑动前言效前言最近需要完成一个小程序页面头部、底部固定;页面中间部分上下滚动、左右滑动的需求,效果如下:效d原创 2020-09-17 23:28:27 · 5988 阅读 · 0 评论 -
微信小程序使用miniprogram-computed遇到的问题
使用miniprogram-computed前言环境引入miniprogram-computed问题如下前言最近使用 miniprogram-computed 遇到了几个坑,记录下来,告知后来者。环境微信开发者工具 稳定版 Stable Build (1.03.2008270)调试基础库 2.12.1miniprogram-computed: ^2.1.1引入miniprogram-computed命令行操作# 项目初始化npm init -y# 通过 npm 安装npm原创 2020-09-16 10:44:21 · 5344 阅读 · 0 评论 -
微信小程序Component页面通信
使用Component前言index.jstest.js注意前言从index页面跳转到test页面(使用Component组件),该如何实现页面通信呢?如下图所示:index.jswx.navigateTo({ url: '/pages/test/test?id=123', events: { // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据 acceptDataFromOpenedPage: function(data) { console.原创 2020-09-03 08:18:28 · 1096 阅读 · 0 评论 -
微信小程序 wxs语法获取小数点后数字
wxs语法获取小数点后数字function getAfterDotNum (num) { return num.toString().replace(getRegExp('\d+\.(\d*)'), '$1')}getAfterDotNum(12.34) // 34原创 2020-08-27 16:12:05 · 1071 阅读 · 0 评论 -
微信小程序三步操作引入Vant Weapp
使用Vant Weapp前言准备工作命令行操作构建npm和使用npm使用Vant Weapp使用组件效果如下前言最近在开发微信小程序,确定使用 Vant Weapp 这个库,安装方式如下:准备工作创建一个微信小程序命令行操作# 项目初始化npm init -y# 通过 npm 安装npm i @vant/weapp -S --production构建npm和使用npm目录如下,构建 npm 会生成 miniprogram_npm 文件夹使用Vant Weapp全局引入组件原创 2020-08-19 13:52:32 · 1279 阅读 · 9 评论 -
微信小程序配置域名信息,成功调用接口
配置域名信息前言1、开发者工具配置2、在微信公众平台配置前言在开发小程序时,只需要 AppID(小程序ID) 就可以动工了。但在小程序联调时,会遇到调用接口报错的情况,如何解决呢?有2种方式。1、开发者工具配置打开开发者工具,进入小程序点击右上角详情-本地设置,勾选不校验合法域名…这个选项不重启开发者工具即可成功调用接口2、在微信公众平台配置打开 微信公众平台使用扫码登录在手机上选中对应的小程序,点击登录登录后,选择开发-开发设置-服务器域名,新增合法的服务器域名此时在开原创 2020-08-14 08:35:31 · 4243 阅读 · 1 评论 -
小程序设置appId
小程序设置appId前言获取appId设置appId前言最近在做小程序,就选择性的看了下最需要的API和语法,同时,自己也注册了微信公众平台账号,用于学习小程序的语法。初始,使用的测试用appId,并未使用公众平台的appId,可通过如下方法获取和设置appId。获取appId通过wx.getAccountInfoSync()获取该小程序的appId设置appId在微信开发者工具中新...原创 2018-10-27 23:01:23 · 5459 阅读 · 0 评论