qq_39131699的博客

原创 uni-app实战记录

1.隐藏掉uni-app的顶部导航栏2.uni-app使用less(vue-cli版)3.uni-app配置路径别名

原创 vue中require引入路径存在变量

需求        菜单icon是通过后台获取的，但图片本身存在前端，后台返回的数据是图片名称。问题        直接使用require(‘路径名’+图片名+’.png’)报错：解决思路        使用require.context找到图片相关信息，名称

原创 uni-app可视化创建项目与cli创建的项目区别

 可视化clivue.config.js否是.env.development,.env.production否是打包app是否mp-storage否是，会导致h5端本地存储失效报错

原创 Can‘t find Python executable “python“, you can set the PYTHON env variable

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

原创 uni-app设置组件样式h5生效，微信小程序不生效的问题

在methods同级下设置：options: { styleIsolation: 'shared' },

转载 uniapp编译微信小程序报错Cannot read property ‘forceUpdate‘ of undefined

uniapp编译微信小程序报错Cannot read property ‘forceUpdate‘ of undefined

原创 uni-app的text嵌套text问题

官方文档说的是：<text> 组件内只支持嵌套 <text>，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。然而，text嵌套text时，里面的text编译到微信小程序时会飘到最上面去，h5和app没有这种情况。想里面嵌套text，外面还是用view好一点。...

原创 uni-app使用转义字符

需求         需要在界面上显示<>问题直接在dom中写的时候报错[ WXML 文件编译错误] ./pages/register/register.wxml unexpected character `�`> 1 | <view class="register data-v-891c2434"><cu-custom vue-id="9a676040-1" bgCol

转载 uni-app父组件显示隐藏时，子组件生命周期无法再次调用

解决方法：在父组件中设置变量，来控制子组件的调用与否父套子的代码：allOrder是子组件父组件中的操作：1.2.在父组件中通过onHide和onShow两个生命周期来控制isShow变量的值转载文章：uni-app的生命周期遇到的问题：由于父组件引用子组件，导致生命周期无效。导致调用接口时不能实时刷新_一壶酒儿的博客...

原创 修改浏览器自填充信息背景色

找准input，然后：input:-internal-autofill-selected,input:-webkit-autofill { box-shadow: 0 0 1000px #fff inset !important;}

原创 uni-app请求接口填坑记录

         这里只测试了h5端和APP端，但据官方的说法，小程序端和APP端的差别应该不大。vue-cli创建的项目         本地调试时，需把h5端和与app端的公共路径区分开来         h5端 &nb

原创 uni-app使用sass历程

本文只是记录个人使用sass遇到的一些问题！！！！并非使用教程！！！！最后我也成功了就是。安装sassnpm install sass-loader --save-dev运行报错：Module build failed (from ./node_modules/sass-loader/dist/cjs.js):原因：sass版本太高解决办法：npm uninstall sass-loadernpm install [email protected] --save-dev运行报

原创 uni-app封装请求

uni-app自己的请求：uni.request但一般情况下，我还是会二次封装一遍符合自己的编程习惯。区分下开发环境和生产环境根目录创建.env.development（开发环境）和.env.production（生产环境）文件// .env.developmentNODE_ENV="development";VUE_APP_URL = '/api'VUE_APP_URL_TWO = ""; // 第二个路径VUE_APP_URL_THREE = ""; // 第三个路径// .e

原创 微信小程序订阅消息

/** * 获取小程序订阅消息权限 */auth() { let that = this; wx.requestSubscribeMessage({ tmplIds: ['nZkEP4qmaPx69I_zw7lEy1ux7o2I_o4HHvvy_pVUodM'], success(res) { // app.toast(`${res.nZkEP4qmaPx69I_zw7lEy1ux7o2I_o4HHvvy_pVUodM}`, 'none'); },

原创 微信小程序cover-view组件无法自动换行

加上这个：white-space: pre-wrap;

原创 微信小程序页面使用indexof过滤不生效的问题

微信小程序wxml过滤只支持三元运算符，indexOf得放在wxs里面过滤

原创 订单列表未支付账单倒计时

先上效果图研究心路         最开始是想给每个订单都添加自己的定时器倒计时，成功了，达到了效果，但继续测试时发现超过二十条数据就会卡死，甚至白屏闪退，小程序承受不住这么多的定时器。后来有小伙伴给我提建议，让我把定时器设置在列表上，每一秒就重新加载一次列表。性能上就好了很多，不卡了，数据加载的多也没问题了。关键代码 // 遍历数组 forOrderList() { this.setData(

原创 flex布局设置成元素本身的大小

flex: 0 1 auto;

原创 公共样式记录

// flex适配.flex { display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Saf

原创 微信小程序富文本适配

超好用的插件：mp-html开发历程看这文档和使用方法看这就用它用它，超好用！

原创 微信小程序页面传参

页面一<view class="main"> <view>页面一</view> <button bindtap="btn">跳转到页面二</button></view>Page({ data: { data: '我是页面一的数据', data1: '我是页面一的第二条数据' }, onLoad() { }, btn() { wx.navigateTo({

原创 微信小程序自定义地址组件

项目需求        需要调用后台传过来的地址，存储地址时存的是地址的id，所以市面上的地址组件均不符合我的需求，只能自定义一个。技术选取        picker-view和picker-view-column核心代码region.wxml<!--地址选择器--><view wx:if="{{show}}" cl

原创 微信小程序使用正则过滤电话号码

小程序没有vue那样的filter机制，但他提供了另一种东西：wxs，可以结合wxml构造页面结构，达成过滤效果，具体了解去看WXS | 微信开放文档。这里直接上代码：/** * filter/phoneFilter.wxs * wxs 只支持es5的语法 * 电话号码过滤器 * 传入 String * 导出 String 带星号 */var phoneFilter = { getPhone: function (phone) { if (phone !==

原创 微信小程序组件周期在页面周期前面运行

微信小程序组件周期在页面周期前面运行

原创 微信小程序使用async

原创 微信小程序阻止事件冒泡

可用：<view catchtap="{{false}}"></view><view catchtap></view>不可用：<view catchtap=""></view>

原创 微信小程序获取用户信息

2021年4月13日后发布的小程序新版本，无法通过wx.getUserInfo与获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。新增getUserProfile接口（基础库2.10.4版本开始支持），可获取用户头像、昵称、性别及地区信息，开发者每次通过该接口获取用户个人信息均需用户确认。具体接口..

原创 微信小程序返回上一页并重新获取数据

由于小程序没有刷新页面这种东西，就换一个角度来写。方法一        使用wx.navigateTo跳转页面后原页面并不会消失，只是隐藏了，小程序的页面生命周期中有一步为onShow，这个方法会在页面出现在前台时进行，也就是说无论是创建页面还是返回页面时都会触发这个事件，我们可以把获取页面数据的事件写在这一步，返回页面时就会达成刷新页面的效果。（建议把页面初始化的操作都放在一个方法里面，比如initPage）方法二&n

原创 微信小程序父组件设置的样式对子组件无效

比如父组件设置了flex布局，子组件需要占满剩下的部分。<!-- 父组件 --><view class="main"> <view class="top"></view> <child></child></view>page { width: 100%; height: 100%; .main { width: 100%; height: 100%; background

原创 微信小程序父子组件传值

父传子    小程序的父组件可以是page类型，也可以是component类型，子组件一定是component类型。<!-- 父组件 --><view class="container"> 我是父组件 <child parent="{{parent}}"></child></view><!-- 子组件 --><view class="child">我是子组件

原创 微信小程序自定义组件命名

在json文件中引入自定义组件时，驼峰命名无法自动转换成 - 形式。

原创 css渐变边框

border-right: 1px solid;border-image: linear-gradient(#F2F2F2, #D8D8D8, #F2F2F2) 0 47;效果：参考文档：border-image - CSS(层叠样式表) | MDN

原创 小程序封装tabbar

项目需求    两种tabbar，外部tabbar有一个入口里面套了一个商城，商城有自己的tabbar，外部tabbar进入部分菜单时有限制条件，判断用户是否登录，是否入驻。踩坑过程小程序app.json自带的tabbar，功能太少，只能做普通的跳转页面，pass。小程序官方weui提供的tabbar，比自带的稍微好一点，但能做到的功能也很少，不符合我的项目需求，pass。自己封装一个tabbar。代码实现创建一个component文件<!-

原创 微信小程序一键登录

项目需求    点击按钮获取用户电话号码绑定到后台，登录。实现思路使用微信开放功能为获取用户手机号的button按钮绑定点击事件为获取用户授权。如果获取用户手机号授权成功调用微信登录接口获取code。用获取到的code去调用后台接口获取到用户的openid。code+openid去调用后台写的小程序自动登录接口获取到access_token，至此登录功能完成。查询用户是否绑定过手机号，未绑定就去调用绑定手机号的接口。绑定过就直接提示登录成功，根据自己

原创 ios下被禁用的input颜色问题

浅到几乎看不见，一度以为自己数据没渲染上去解决办法：input:disabled,input[disabled],input.disabled { color: #999999 !important; opacity: 1; -webkit-text-fill-color: #999999; -webkit-opacity: 1;}效果：若是不写-webkit-text-fill-color: #999999;-webkit-opacity: 1;就是这个样子：

原创 微信小程序input框传参

在微信小程序中原生input组件无法直接传参，但可以通过自定义属性的方式达成效果<!-- 自定义属性的命名格式为“data-自定义名字” --><input data-type="realname" type="text" class="value" placeholder="请输入您的真实姓名" placeholder-class="placeholder" value="{{realName}}" bindinput="bindInputChange"></input&

原创 微信小程序中image无法显示

在小程序中image不能放在text里面，改成view就好

原创 微信小程序中使用过滤器

主要是借助wxs文件，具体说明看文档：WXS | 微信开放文档直接上如何使用：在根目录下新建filter文件夹创建你需要的过滤器文件，后缀名为.wxs编写过滤器代码// wxs不支持es6的语法var statusFilter = { // 定义一个函数作为过滤器 参数status为传来的原始值 getStatus: function(status) { if(status !== '' && status != undefined) { //

原创 微信小程序与普通h5标签的差别（持续更新）

h5微信小程序说明pview小程序无p标签，可用view来代替spantext同上divview同上

原创 微信小程序安装weui

在项目根目录下执行：npm init然后下包npm install --save weui-miniprogram然后报了这么一段错npm ERR! code ERR_TLS_CERT_ALTNAME_INVALIDnpm ERR! errno ERR_TLS_CERT_ALTNAME_INVALIDnpm ERR! request to https://registry.cnpmjs.org/weui-miniprogram failed, reason: Hostname/I.