随笔分类 - 微信小程序
摘要：在项目中用到过的稍有改动的WxValidate.js文件 /** * 表单验证 * * @param {Object} rules 验证字段的规则 * @param {Object} messages 验证字段的提示信息 * */ class WxValidate { constructor(rul
阅读全文
摘要：目录 1、什么是生命周期 2、分类 小程序应用的生命周期 页面的生命周期 组件的生命周期 3、三种生命周期的详解 4、页面与组件 4.1条件渲染 4.2父子组件的影响 1、概念 生命周期：生命周期（Life Cycle）是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。 生命
阅读全文
摘要：实现功能：在微信里打开的h5项目，想要引流去关注微信公众号。 实现思路：通过公众号关注链接，跳转至公众号关注页面。 实现步骤： 关注公众号的链接：https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIyOTQ5ODI1NA==#we
阅读全文
摘要：一、设置为全局变量，在另一个页面再获取这个变量 二、通过wx.navigateTo()的url传值 三、通过wx.navigateTo()的success建立一条数据通道 传递数据的页面 data: { data1:"第一个页面的值" }, //在wxml页面设置一个按钮，并绑定事件ddd ddd:
阅读全文
摘要：1、watch.js 实现监听器功能的逻辑代码 /** * 设置监听器 */ export function setWatcher(page) { let data = page.data; let watch = page.watch; Object.keys(watch).forEach((v)
阅读全文
摘要：public.wxs // 处理手机号中间四位不显示 function filterPhone(val) {var reg = getRegExp('^(\d{3})\d{4}(\d+)'); return val.replace(reg, '$1****$2'); } module.exports
阅读全文
摘要：1. app.js App({ require: function ($uri) { return require($uri); } } 2. 使用页面 const { getCategories } = app.require("utils/api"); 注：api.js export funct
阅读全文
摘要：自定义的tabbar组件，每次切换页面时都会重新加载页面和数据，需要通过一些方法把tabbar菜单的数据保留下来，不要每次都请求数据。 方案一：在app.js文件里定义全局数据（本次项目采用的是可以在后台管理里配置的数据，所以采用了方案一） 1、在app.js文件里定义一个全局变量 App({ gl
阅读全文
摘要：问题：在手机上，swiper的item一直在抖动，不滚动了。 官方： 解决方案：（参考别人的文章，放在离自己的项目代码里） wxml <view class="swiperBox" style="{{defaultData.indicatorColors}}"> <swiper class="sli
阅读全文
摘要：使用： //wxml文件 <canvas id="qrcode" /> //js文件 import qrcode from '../../utils/qrcode' //引入qrcode.js文件 Page({ onLoad() { wx.createSelectorQuery().select('
阅读全文
摘要：1.在父组件中调用子组件的方法 1）父组件 <addcar id="classCart" cartdata-data="{{cartdata}}" /> js调用： let classCart = this.selectComponent('#classCart')// 页面获取自定义组件实例 cl
阅读全文
摘要：7、在components怎么使用app.scss的样式 答：不能直接使用，需要在使用到的页面先@import引入app.scss才行
阅读全文
摘要：6、由于使用了ts踩到的安装vant的坑，重点在第4步 1）在根目录下执行安装依赖的命令 npm i @vant/weapp -S --production 2) 修改 app.json 将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，
阅读全文
摘要：5. 如下图将顶部导航栏的地方改成自定义样式 1）配置app.json { "window": { "navigationStyle": "custom" //增加这行 } } 2)、封装顶部导航栏的样式 创建组件文件夹及文件miniprogram\components\navigation-bar
阅读全文
摘要：4. ts文件中方法的e的类型是什么 页面：e:WechatMiniprogram.BaseEvent 页面各种方法的e的类型可以在typings\types\wx\lib.wx.event.d.ts文件中找到。 组件：e:WechatMiniprogram.Component.Constructo
阅读全文
摘要：3.request.ts文件封装 api.ts import request from './request' //获取token export function init(data: object){ return request({ url:'/api/wechat_mini/auth/wx_i
阅读全文
摘要：设置主题颜色 1.在utils中新建文件userstyle.ts let themecolor="#1F554F" //绿色 let fcolor1="#0D2D2C" //黑色 let fcolor2="#8F9A99" //灰色 export const colors = { themecolo
阅读全文
摘要：8.关于微信小程序顶部自定义导航栏上下位置偏差的问题 顶部导航栏的结构： 已知： 获取系统信息：wx.getSystemInfoSync() 获取胶囊信息：wx.getMenuButtonBoundingClientRect() wx.getSystemInfoSync().statusBarHei
阅读全文
摘要：语言环境：ts + scss 1.自定义底部菜单 1）在根目录下创建文件夹及文件 注意：如果文件夹的位置不是在根目录下，底部导航栏不会显示的。 index.wxml <view class="tab-bar"> <view wx:for="{{list}}" wx:key="index" class
阅读全文
摘要：1. 引用本地静态图片时，将图片转成base64的格式 let image = '/statics/home-icon.png' let base64 = wx .getFileSystemManager() .readFileSync(image, "base64"); let imagebase
阅读全文
