[Taro] 解决使用 Taro UI 小程序下 Iconfont 图标不显示问题

Taro UI 配置第三方的文档配置即可解决 https://taro-ui.jd.com/#/docs/icon 解决问题: 之前只有在H5下才显示 Iconfont 图标后来按照此文档配置后,小程序下 Iconfont 图标才可正常显示…

微信小程序引用iconfont图标字体解决方案；

1)首先,登录阿里巴巴iconfont.cn 2)新建项目 3)点击icon收藏 4)加入到test项目中 5)下载到本地解压 6)生成代码 7)复制iconfont.css到xxx.wxss 8)替换iconfont.css中的@font-face为上面的生成代码 9)xxx.wxss样式中@import使用 @import "../../../css/test.wxss"; 10)wxml中使用 <text class='iconfont icon-home' s…

Taro 开发踩坑指南 (小程序，H5, RN)

Taro 开发踩坑指南 (小程序,H5, RN) css taro 如何展示多行文本省略号 https://www.cnblogs.com/xgqfrms/p/12569057.html UI 设计稿尺寸 375px * 2 === 750px (iphone 6) https://www.cnblogs.com/xgqfrms/protected/p/12568792.html js taro 绑定事件 https://nervjs.github.io/taro/docs/event.html…

微信小程序 - 下拉菜单组件

使用: 1.导入组件 2.使用组件 3.数据传入 4. 获取数据(通过同步缓存,获取“choose”)- 发送到后端点击下载:小程序-下拉组件.…

微信小程序下可以使用的MD5以及AES加密(通用)

两段代码都来自网络 ,在小程序下的加解密结果与CS/BS等算出的结果都一致,支持汉字. 一.MD5: var rotateLeft = function (lValue, iShiftBits) { return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits)); } var addUnsigned = function (lX, lY) { var lX4, lY4, lX8, lY8, lResult; lX8…

微信小程序下拉加载和上拉刷新两种实现方法

方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里设置window属性设置js里onPullDownRefresh和onReachBottom方法下拉加载说明: 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新. onPullDownRefresh(){ console.log('--------下拉刷新-------') wx.showNavigationBarLoadin…

微信小程序使用阿里图标

微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64.用网址https://transfonter.org/转换) 转换成功后会得到三个文件demo.html.iconfont.ttf.stylesheet.css. 步骤三:把转换成功的文件放入微信小程序这是我项目的部署文件 s…

微信小程序内容组件图标 icon

小程序内置了一下图标可以用需要自定义图标的看这里 ==>微信小程序中使用iconfont/font-awesome等自定义字体图标小程序内置图标使用示例 <icon type="success" size="14" color="red"/> 参数说明: 属性名类型默认值说明 type String icon的类型,有效值:success, success_no_circle, info, warn, waitin…

微信小程序使用字体图标

项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为: 搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮. 点击下载代码,将得到名为download.zip的压缩包,解压将看到以下内容: 第二步:转换ttf文件…

Svn win7系统下状态图标不显示-转载

Svn win7系统下状态图标不显示 Svn版本 tortoisesvn-1.8.8.25755-x64-svn-1.8.10.msi 2.不显示图标状态如图1,期望结果显示图标状态如图2 图1 图2 3.在程序的文件夹下,右键--TortoiseSVN--Settings(设置)得到图1,然后弹出如图2所示对话框,点击Icon Overlays--Status cache,选择Shell--确定. 图1 图2 4.找到SVN安装包,双击打开SVN安装包,点击Next--选择Repair(修复)…

Taro使用mobx做国际化小程序

效果目前项目使用的是Taro做小程序开发框架,Taro可以集成mbox,当然一些正常的框架也可以集成mbox,只不过需要自己集成,或者用redux也可以用相同的思想实现. 思路利用mbox action会重新render页面的能力来实现通过切换action来改变对应的语言,同样的国际化会写成一个字典数据结构的数据,通过设定统一的出口去统一读取字典中的值,并且可以实现参数代入. 核心代码 import { observable } from 'mobx' // Language是一个函数根据参…

微信小程序禁止下拉_解决小程序下拉出现空白的情况

微信小程序禁止下拉在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方. 产品的需求不太允许这么做,会影响用户体验,查看文档发现可以使用enablePullDownRefresh这属性来实现,在page.json里面添加: "enablePullDownRefresh":false 这样可以禁用页面下拉滚动,需要注意的是不可在全局配置 app.json中配置.经测试发现:虽然禁止了下拉刷新,但是在部分ios端仍然可以下拉出现空白.那么该如何解决呢? 方法:当页面滚动的时候判断与…

微信小程序下拉刷新时有部分区域不随着下拉移动

问题区域元素使用(position: fixed),小程序页面下拉刷新时,这部分区域不会随页面下拉移动. 如何解决删除设置的top属性…

微信小程序下拉刷新和上拉加载

小程序知识点二 1.上拉加载和下拉刷新 Wxml文件 <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll"> <block wx:for="{…

微信小程序下拉框

微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果下面来看一下代码: 首先WXML <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='select_img {{show&&&q…

微信小程序 --- 下拉刷新上拉加载

查看文档看到:page()函数注册页面的时候,有 onPullDownRefresh 监听用户下拉动作,onReachBottom 页面上拉触底事件的函数. 在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在page.json中的设置对所有页面有效,在单独页面设置则对当前页面有效: "enablePullDownRefresh": true, 简单示例: // 下拉刷新 onPullDownRefresh: function () { console.log("…

关于微信小程序下拉出现三个小点

包子这天看美团外卖的小程序,再瞅瞅自己的背景色,发现,美团下拉的时候有三个小点,但是我自己的校车徐下拉的时候没有三个小点,很是郁闷,于是各种的找各种的找,发现,这三个小点是微信小程序自带的,你只需要设置一下全局的背景色就ok了,设置全局的背景色在app.json里面设置就行,记住,是设置这个属性backgroundColor,不是这个属性:navigationBarBackgroundColor.....谨记谨记......这个定位我在上次说过了,接了百度地图的api.....…

解决Mac版微信小程序开发工具打开后无法显示二维码

问题描述: 正常情况下,打开微信小程序开发工具后,首页提示扫描二维码进行登陆,但是如果不显示二维码,当然无法登陆. 解决方案: 无法显示二维码肯定是程序运行哪里出错了,我们直接点击桌面图标是无法排查错误,所以需要切换至命令行进行启动. 打开命令行,进入如下目录 /Applications/wechatwebdevtools.app/Contents/MacOS 执行目录下的程序 ./wechatwebdevtools 显示错误信息如下 [827:32515:0325/101822.447917:…

微信小程序开发过程中tabbar页面显示的相关问题及解决办法！

在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示tabbar,而有些页面不显示tabbar呢?今天我把我在开发过程中遇到的问题整理出来跟大家分享.问题1:为什么页面底部不显示tabbar?很多网友(包括我自己)也遇到过此类问题,在app.json里面明明加了tabbar,list里面也加了路径怎么就是不显示呢?举例,如下代码,为什么屏幕页面底部没有如…

微信小程序~下拉刷新PullDownRefresh

一.onPullDownRefresh回调代码: // http://itlao5.com onPullDownRefresh: function () { console.log('onPullDownRefresh') this.queryData(id) }, 二.enablePullDownRefresh支持然而=下拉触发不了js回调,需要再json中配置支持下拉刷新,即: "enablePullDownRefresh": true // 请注意是true,不是&quo…

全栈开发工程师微信小程序-下

app.json { "pages": ["pages/index/index"] } index.wxml <text>Hello World</text> index.js Page({}) { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundText…

微信小程序下拉加载下一页

小程序做得多了,有些常用功能就有必要记录一下请看详解: 微信小程序之下拉触底时加载下一页 wxml参考: <scroll-view class='dataContainer' scroll-y bindscrolltolower="nextDataPage"> <block wx:for="{{userList}}" wx:key="index"> <text>这是一条数据:{{item.data}}<…

微信小程序下拉刷新上拉加载

1.下拉刷新小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调. 1. 需要在 .json 文件中配置. 如果配置在app.json文件中,那么整个程序都可以下拉刷新.如果写在具体页面的.json文件中,那么就是对应的页面,可以下拉刷新. 具体页面的.json文件: 1 { 2 "enablePullDownRefresh": true 3 } app.json文件: 1 "window": { 2 "enablePullD…

微信h5跳转小程序wx-open-launch-weapp开放标签不显示（已解决）

前言: 前几天成功对接了跳转第三方小程序的功能,今天有个页面有需要对接.但是奇怪的是用的和上次一模一样的配置,但就是死活不显示wx-open-launch-weapp这个开放标签的按钮,看不到任何效果(这个问题真的是让人欲哭无泪,相同的代码不同的页面就不显示了),下面就说说我的排查解决过程. 开启wx.config的debug模式: 首先我们在wx.config的配置中开启debug. wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端ale…