小程序
Fighting宁
这个作者很懒,什么都没留下…
展开
-
小程序安卓和ios使用自定义字体,解决安卓不生效问题
官网介绍官网文件的loadFontFace也可以实现自定义字体引入和使用,如果需要在app.js使用记得加上global:true,不然app.js不会执行背景:项目中要把所有字体改为宋体,这里我使用的是font-face引入外部字体文件准备字体文件这里我准备的是OTF的文件,是找UI要的。把该文件上传到自己的服务器上,生成一个访问的链接。在app.wxss中使用@font-face { font-family: 'SimSun700'; src: url('链接地址必须是h原创 2021-07-09 09:32:46 · 5629 阅读 · 0 评论 -
小程序中在页面修改自定义组件的样式
官网介绍使用externalClasses将样式暴露出去/* 组件 custom-component.js */Component({ externalClasses: ['my-class']})组件<view class='my-class'></view页面<!-- 页面的 WXML --><custom-component my-class="red-text" />.red-text { color: red原创 2020-11-16 17:28:57 · 859 阅读 · 0 评论 -
小程序避坑之路---echarts层级遮挡
需求:实现一组tab固定在顶部区域,tab项可以实现滑动。(其实需求本身是不难实现的,用scroll-view标签即可实现)难点:难点在于内容区域有echarts图标,图标的层级太高,scroll-view无法遮挡,cover-view可以遮挡echarts但是却实现不了横向滚动解决:在内容区域加了scroll-view标签,不让echarts在页面进行滚动,而是再scroll-view中进行滚动包了scroll-view标签后如果有tab切换也回牵扯出其余的bug。这个解决是在每个tab对应的页.原创 2020-11-16 15:54:14 · 2074 阅读 · 1 评论 -
微信小程序自定义第三方ui组件库踩坑之路
随着公司项目的扩大,每个项目用到的ui样式都差不多,每次写都需要在项目之间来回搬代码,导致很多代码其实是多余的原创 2020-09-12 14:11:47 · 685 阅读 · 0 评论 -
小程序tab栏筛选功能 ---底部弹出动画
仿今日头条app的tab栏功能这里讲tab栏还有弹出功能封装了组件组件的html<scroll-view class="tab-item" scroll-x scroll-with-animation="true" bindscrolltoupper="toUpper" bindscrolltolower="toLower" id="scroll-view" scroll-left="{{ scrollLeft }}"> <view class="tab-item-st.原创 2020-08-26 17:02:22 · 561 阅读 · 1 评论 -
小程序tab自动滚动到点击位置
要实现的效果就是顶部的tab栏很多项时,点击的时候可以自动滚动到点击的位置<scroll-view class="tab-item" scroll-x scroll-with-animation="true" bindscrolltoupper="toUpper" bindscrolltolower="toLower" id="scroll-view" scroll-left="{{ scrollLeft }}"> <view class="tab-item-sty">..原创 2020-08-26 15:51:47 · 935 阅读 · 0 评论 -
小程序弹框覆盖后台报错弹框
小程序当后台报错时,还返回了msg信息,此时msg会在小程序页面以弹框的形式显示出来,但是这种弹框前端控制不了弹框的时间。需求:前端弹框,覆盖后台报错的弹框解决:再catch中写 try{ }catch(err){ let {msg} = err wx.showToast({ title:msg,//报错提示文本 icon:'none', duration: 6000,//提示的时间 }) }.原创 2020-08-04 14:30:22 · 252 阅读 · 0 评论 -
微信小程序去掉scroll-view的滚动条
/* 隐藏滚动条 */::-webkit-scrollbar { width: 0; height: 0; color: transparent;}原创 2020-07-01 17:38:18 · 567 阅读 · 0 评论 -
小程序rich-text文字和图片溢出屏幕
最近在做小程序的项目,发现富文本里的内容溢出屏幕原因:富文本渲染的内容中空格较多,或者图片太大。都会对手机显示造成影响在utils文件写了方法,并导出const formatRichText = html => { let newContent= html.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;"').replace(/\<div style=\"/gi,'<div.原创 2020-07-01 11:00:20 · 1402 阅读 · 1 评论 -
小程序页面在ios出现横向滚动条问题
原因:元素设置了width:100%然后又设置了margin或者padding可以撑大盒子的边距。此时在ios就会出现横向滚动条解决给盒子加box-sizing: border-box全局加page, view, scroll-view, swiper, movable-area, cover-view, text, icon, rich-text,progress, button, checkbox-group, checkbox, form, input, label, picker,p..原创 2020-06-18 13:19:36 · 2186 阅读 · 0 评论 -
iOS系统小程序图片可以长按,长按以后导致其余页面崩溃
发现可以长按的图片都是rich-text中的图片解决rich-text{ -webkit-touch-callout:none; }原创 2020-06-05 16:45:52 · 338 阅读 · 0 评论 -
小程序三元表达式的嵌套
stylestyle="height:{{isShow? '': processList.length > 3 ? '200rpx':'' }}"classclass="process-list content {{isShow ? 'on' : processList.length > 3 ? '':'on'}}"原创 2020-05-21 09:18:43 · 500 阅读 · 0 评论 -
小程序input密码输入框限制只能输入数字,大小写字母,@!._的使用
小程序input密码输入框限制只能输入数字,大小写字母,@!._的使用最近写小程序修改密码功能时,需要限制密码只能输入数字,英文字母,特定的符号。因为小程序的input调起的手机键盘是可以输入表情之类的特殊符号的,所以这里做下限制 <view class="old"> <view class="text">旧密码</view> <input placeholder="输入旧密码" class="oldInput" valu.原创 2020-05-09 16:58:14 · 6414 阅读 · 2 评论 -
全国默哀日中小程序显示灰色
2020/04/04全国默哀日此时大家发现很多网站,app,小程序的整体色调全部变为了灰色,其实并不是所有的图标全部替换了灰色,只是在css中设置了一个属性这以小程序为例子app.wxss全局的样式文件中page { -webkit-filter: grayscale(.95);}此时小程序整体就变为了灰色...原创 2020-04-05 20:11:21 · 3754 阅读 · 2 评论 -
小程序中使用async和await
小程序原生中使用async 和await 时会报错此时就是因为在.js中使用了async和await 但是小程序原生是不支持的解决方案1:npm init -y 快速创建一个packpage.json文件命令行执行 npm i regenerator-runtime安装regenerator-runtime打开小程序开发者工具,点击右上角的工具选项,点击构建npm,稍等几秒,小程序...原创 2020-04-05 17:12:16 · 1859 阅读 · 1 评论 -
微信小程序手写输入法input和textarea获取不到值
如果客户使用搜狗输入 采用手写键盘,不点击手写键盘的确定按钮,只点击小程序界面中其他地方,虽然input上面显示了 输入内容,但是通过bindinput 监听事件,获取不到刚刚输入的汉字解决:给input和textarea绑定两个事件,input事件,和blur失去焦点事件,来给输入框的内容赋值...原创 2020-03-28 15:13:26 · 1922 阅读 · 0 评论 -
微信小程序实现下拉框功能
小程序中是没有直接的下拉框标签可以使用的,所以下拉框需要手动写,或者使用框架因为考虑到下拉框展开的时候,可能需要遮挡住其余的样式,这里就用的cover-view标签.(不考虑遮挡的可以换成普通的view标签) <view class="search-bar"> <view class="condition" bindtap="showConditi...原创 2020-03-28 15:05:02 · 8725 阅读 · 2 评论 -
小程序中获取用户当前位置信息并显示
需求:小程序中获取用户的当前位置,并显示具体位置1.先调用小程序api获取用户的经纬度在app.json文件中配置 "permission": { "scope.userLocation": { "desc": "***将获取您的位置信息" } }, // 获取经纬度 getLocation() { return new Promise((r...原创 2020-03-28 11:19:05 · 2269 阅读 · 2 评论 -
解决小程序打包不能超过2M的方法
小程序在打包上传代码是,代码的大小不能超过2M的大小,但是当小程序设计的功能较多时,此时包的大小会超过2M解决:使用小程序的分包机制开发者通过在 app.json subpackages 字段声明项目分包结构:- { "pages":[ "pages/index", "pages/logs" ], "subpackages": [ { ...原创 2020-03-13 16:02:51 · 6321 阅读 · 0 评论 -
小程序自定义narbar样式
最近遇到了项目需要自定义navbar,下面来介绍下具体的步骤在当前页面的.json文件里进行配置(如果在全局的.json文件中配置的,则所有的页面中小程序自带的navbar样式都没有了)"navigationStyle": "custom"定义一个组件app.js获取胶囊的位置信息//app.jsApp({ globalData: {}, onLaunch: ...原创 2020-02-24 19:45:49 · 603 阅读 · 0 评论 -
wepy2.0中tabBar图片显示不出来bug
最近使用wepy2.0和vant写一个小程序在写底部的tabBar时,总是报上面的错,图片不能正常显示解决:配置app.wpy此时就可以正常显示原创 2020-01-31 20:15:52 · 441 阅读 · 0 评论 -
wepy-框架:[15:24:16] ERR! Cannot read property 'addDeps' of undefined [15:24:16] ERR! compile Compile
运行wepy build --watch时报错如下:解决 : npm install @wepy/cli@next -g运行以上代码:此时项目就可以正常启动原创 2020-01-30 15:47:16 · 220 阅读 · 0 评论 -
小程序页面找不到报错
app.json 中未定义自定义编译中指定的启动页面 data/index/index此时是在小程序编译模式中把data/index页面设置成了默认页面,路径写错导致的原创 2020-01-28 15:15:42 · 1268 阅读 · 1 评论