在仿苹果官网"垃圾桶"时, 设计出的UI使用PingFang SC 字体,在网上查了很久,特记录.如果你有更好的方法,欢迎评论留言~ 实现原理,使用@font-face将字体下载在用户电脑中,然后font-family使用字体. 关于font-face链接 css: @font-face { font-family: 'myFont'; src: url('/assets/font/PingFangSC-Light.ttf'); //你的资源目录 font-weight: normal

小程序引入e-charts图表 这里是狗尾草第一次发表掘金文章,日后望各位大佬多多支持~ 前言:运营助手,见名知意,没有图表数据的展示,看上去是有多空白.因此,俺们UI做了很好的交互,一个页面来了4个e-charts图表,且基本都不一样.身为一个职业前端,怎么能猥琐呢? 干就完了~ 实现思路 因为一个页面要引入多个图表,所以需要对e-charts图表进行封装.然鹅问题来了,怎么引入呢? 为了兼容小程序 Canvas,ECharts提供了一个小程序的组件,用这种方式可以方便地使用 ECharts.

今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also

uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponents wxcomponents下新建vant目录 创建完成后的目录结构 2. 项目中引入vant-weapp组件 在vant-weapp的GitHub Releases版块下载最新的zip包 解压下载文件,将dist目录拷贝到刚才创建vant目录中 3. 页面中使用引入的UI组件 在App.Vue文

首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts 里面有微信小程序引入ECharts组件的教程,下载了官方的项目后,拷贝ec-canvas到我微信小程序的目录下,然后在我的微信小程序文件夹中创建line文件夹,并新建四个文件index.js inde

先看下最终的效果(默认可以获得未来三天数据): 第一:首先准备条件(必须): 1.小程序已认证,有appID 2.必须把https://api.map.baidu.com 添加到小程序的合法域名列表中 上面两个条件缺一不可,满足后 继续往下看 第二:在百度开放平台上创建一个应用,拿到Ak(前提有百度账号).申请地址:http://lbsyun.baidu.com/apiconsole/key 应用创建成果: 第三:万事俱备,只欠东风,引入官方提供的JS文件(下载地址:http://lbsyun.

前言 之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了! 框架使用的是美团的mpvue,我也是一边学习,一边写的,如有错误之处,还望大家指出. 在这里我有个问题,为什么微信小程序不支持css里面直接导入本地图片作为背景图呢? 内联式 <view class="img" style="background-image: url(/static/images/draw.png)"></view> 外部引入 如果css是

如果大家是按照官网的引入方法,是否报错如图 不着急,大家就试试我的方法吧!两步走完美搞定! 第一步: 在小程序顶部点击设置->项目设置,会弹出下面的窗口.大家把使用npm模块勾上对勾. 第二步: 在小程序的项目根目录下面进行npm init的初始化后进行安装vant 1.npm init 2.npm install --production vant-weapp 总结:以上是我本人的解决办法,如果大家谁还遇到了其他问题也可以评论,我们共同解决,欢迎评论!

iview Weapp组件的使用方法: 1. 下载小程序组件库 (前提是你已经有了项目目录) 你可以直接去github把iView Weapp的代码下载下来,也可以用过npm来下载. github地址:https://github.com/TalkingData/iview-weapp 2. 将组件库复制到工程的static目录下 下载完成后,到它的目录中寻找名为dist的目录并复制到你的工程目录下,然后给这个dist目录改个名字,比如叫iview. 3.  为需要使用自定义组件的Page进行配

微信小程序大热,在小程序过程中,我们很多时候都会用到地图.不管是企业的地址,还是商家的配送都会用到地图: 我在刚写地图这一块时,在网上也参考了很多网友的方法,始终有Bug(类似于地图拖拽是画面抖动,无法点击跳转到导航页面等等) 下面的代码是后台动态添加坐标(经度纬度的方法) 我这里有这么一个方法,希望对你有用:wxml: <map bindtap="toMap" showLocation id="map" latitude="{{latitude}}

1.不带参数 首先在pages文件夹中新建一个template文件夹,文件夹中新建一个template.wxml文件,代码如下 <!--template.wxml--> <template name="msgItem"> <view> <text>This is template.wxml文件,我是一个模板</text> </view> </template> 然后我们书写我们所要调用template的

步骤: 1.首先将外部js放在你指定的文件夹里(这都是废话...) 2.接下来 将该js文件中你要使用的方法给暴露出来 3.在您要使用的js中引入该js 4.使用暴露出来的方法 例子:使用md5加密 首先将md5.js放入项目里某个文件夹中(我这里放在了utils工具文件夹中) 打开md5.js ,将我要使用的方法用module.exports给暴露出来,如图所示(我这里暴露了三个方法,用的json形式,若只有一个就直接写,不用使用json) 在您想要用到这个方法的js里面 require这个j

在开发的过程中,总会遇到很多可复用性的样式,为了代码更加的简洁和减少微不住道的文件体积,我抽取了一部分的公共样式,并全局引入,不知是否妥当,如有更好的想法,欢迎一起探讨 在app.wxss中引入 然后你在其他的页面直接用class名就可以了.

前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version": "1.0.0", &quo

小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首先挑选图标,添加入库 然后添加至项目 然后在“我的项目”中,将资源文件下载到本地 建议设置为 font class 二.在项目中引入资源 在小程序项目中建一个 iconfont.wxss 在下载的资源文件中有一个 iconfont.css,复制文件中所有代码,粘贴到 iconfont.wxss 中

Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎 Github → https://github.com/dntzhang/cax 点我看看 DEMO 小程序 DEMO 正在审核中敬请期待 小游戏 DEMO 正在审核中敬请期待 特性 Learn Once, Write Anywhere(小程序.小游戏.PC Web.Mobile Web) 支持小程序.小游戏以及 Web 浏览器渲染 小程序.小游戏和 Web 拥有相同简洁轻巧的 API 高性能的渲染架构 超轻量级的代码体积 松耦合

小程序引入外部文件的方式是:@import "*/*.wxss"; 因为业务需要,正在开发的小程序中需要使用iconfont,很容易想到了H5的引入方式: ```` @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1485242349767'); /* IE9*/ src: url('iconfont.eot?t=1485242349767#iefix') format('embedded-

小程序引入外部文件的方式是: 只需要在其css文件写上: @import "外部css地址.wxss"; 因为项目需要, 小程序中需要使用iconfont , 很容易就想到了H5的引入方式: @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1485242349767'); /* IE9*/ src: url('iconfont.eot?t=1485242349767#iefix') form

小程序引入外部文件的方式是:@import “/.wxss”; 小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为base64,然后引用. 下载到本地并解压ttf文件,到链接https://transfonter.org/,对文件进行转换. 转换完成,下载到本地后,打开转换的文件,将代码引用到wxss中,并定义class类名,再将定义好的文件,在app.wxss中引用,便可以全局使用该文件样式 小程序我也是做了没多久

英语词典小程序 基于英语词典小程序插件 - 提供开源地址 项目地址 英语词典小程序插件: 微信小程序 词典 真题基础服务插件(gitee.com) 功能特色 [x] 全面详实的经典词库,详细释义覆盖约1.2w词,精简释义覆盖基本全部词汇 [x] 提供多语言识别翻译功能接口 [x] 不断完善的例句库,涵盖四六级和考研英语例句 [x] 详实的单词分类,针对不同需求,提供单词记背需要 [x] 单词例句以组件形式呈现,方便小程序引入使用 [x] 提供第三方插件API供调用,可自定义展现形式 功能预览 插

背景: mpvue进行小程序项目开发时候,会有很多图标需求,但是小程序官方提供的icon图标库实在有限而且也不利于调样式,所有想到和之前前端项目一样引入iconfont. 图标加入购物车及项目 下载到本地,解压以后的文件夹列表如下: 修正:只需要 复制 iconfont.css文件就可以了,其他的文件不需要 把红框中的部分 粘贴到 自己的项目中(复制 iconfont.css就可以了),记得放在 static文件目录下 因为字体图标也属于静态资源的一部分.注意:拷贝到自己项目后,将iconfon