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

通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理其样式.例如,在模版文件中这样写: <input placeholder-class="place-holder" class="input-text" name="username" placeholder="用户名" /

微信小程序中,可以用 hover-class 属性来指定元素的点击态效果.但是在在使用中要注意,大部分组件是不支持该属性的. 目前支持 hover-class 属性的组件有三个:view.button.navigator. 不支持 hover-class 属性的组件,同时也不支持 hover-stop-propagation.hover-start-time.hover-stay-time 这三个属性. 使用方法: <view hover-class="bg_red">这是

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.   微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx

在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以. 以前我的做法是用js获取屏幕的高度,然后将其赋值给height, 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口,然后通过setData赋值 但是显然通过js来进行的,效率上肯定不如css直接给定样式. 于是我们

全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, 群id lang 当 type="user*" 时生效,以哪种语言展示 userInfo <open-data type="groupName" open-gid="xxxxxx"></open-data> <open-

之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门].作为一个前端开发人员,了解后端及数据库是学习工作的需要. LeanCloud直接登录,未注册直接创建账户.它是一款免费的线上数据库(开发版免费).适用于一些想自己写微信小程序前端但不太会后端的开发者学习用.本篇文章涉及数据存储服务(增删查改). 首先,下载一个JavaScript-sdk :av-weapp-min.js[下载链接],它是在微信小程序中使用此数据库的关键文件.下载之后,保存至项目路径,这里以‘/libs/a

微信小程序中scroll-view的几个坑 1:设置scroll-x时,却不能横向滚动,因为view是block组件,但是这里用了flex就不能滚动了(想用flex布局,请开启属性enable-flex).所以只能给你的scroll-view设置如下 overflow: hidden; white-space: nowrap; 2:隐藏滚动条,加如下css ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } 上边这段代

第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 --->  点击“添加入库”  -->  点击购物车进入购物车  -->  点击下载代码按钮. 点击下载代码,将得到名为download.zip的压缩包,解压将看到以下内容: 第二步:转换ttf文件 进入https://transfonter.org/平台,将解压出来的ttf字体文件转化成base64格式. 流程如下: 点击下载

微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官方对于自定义组件这一块有了比较大的变动,首先比较明显的感觉就是文档比以前全多了,有木有!(小程序文档),现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中复用,提高自己代码的可读性,降低自己维护代码的成本! 本篇文章就是手把手教你实现小程序

在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个富文本转化插件wxParse,方便我们使用,前人种树后人乘凉,我们使用它来解析HTML就很方便了,这对于我们在后端已经完成的一些HTML内容,展示在小程序里就非常不错. 这个插件的Github地址如下:wxParse-微信小程序富文本解析组件,官方称它支持支持HTML及markdown解析,我这里主

提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情.我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(Session)状态. 在微信小程序中,我们大致会涉及到以下三类登录方式: 自有的账号注册和登录 使用其他第三方平台账号登录 使用微信账号登录

不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组件的页面,所以,先在pages文件夹下面新建classic页面,然后在项目根目录下新建component文件用于存放组件,并在该文件夹下面新建like组件:    这里建议在新建页面的时候,先新建存放页面的文件夹,然后编辑器中鼠标右击该文件夹,然后选择新建page.新建组件的时候,也是先新建存放组件

本文由腾讯云技术团队原创,感谢作者的分享. 1.前言   微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现微信支持 WebSocket 还是很值得玩味的.这个特性意味着我们可以做一些实时同步或者协作的小程序. 这篇文章分享了一个基于WebSocket长连接的微信小程序——简单的剪刀石头布小游戏的制作过程,希望能对想要在微信小程序中使用 WebSocket 的开发者有所帮助. 学习交流: - 即时通讯开发

全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> {{message}} <view> index.js Page({ data: ({ message: 'Hello' }) }) // 组件属性 // data中的数据绑定到微信小程序组件上 <view id="item-{{id}}"></view&

全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链接 open-type 跳转方式 delta 当 open-type 为 'navigateBack' 时有效,表示回退的层数 app-id 当target="miniProgram"时有效,要打开的小程序 appId path 当target="miniProgram"

微信小程序中的app.js 关于小程序app.js生命周期的介绍 App(Object) App() 函数用来注册一个小程序.接受一个 Object 参数,其指定小程序的生命周期回调等. App() 必须在 app.js 中调用,必须调用且只能调用一次.不然会出现无法预期的后果. onLaunch 生命周期回调-监听小程序初始化 小程序初始化完成时(全局只触发一次) onShow 生命周期回调-监听小程序显示 小程序启动,或从后台进入前台显示时 onHide 生命周期回调-监听小程序隐藏 小程序

微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async-await方法属于ES7语法,在小程序开发工具中如果勾选es6转es5, 会报错: ReferenceError: regeneratorRuntime is not defined 避免报错,可以引入 regenerator 在根目录下创建 lib 文件夹,并将 https://github.c

本人也是刚开始接触微信小程序,在微信小程序中经常会遇到修改数组中某一项的值,比如array[0]或者是对象中object.item的值.这些值在微信小程序中都需要使用一个名为setData的方法,而这个方法是通过键值对的形式对数据进行修改,setData({ 参数名: 值 }); 既然知道是以键值对的方式进行传参,那么我们在修改数组和对象的时候就直接将要修改的参数名写成对应字符串就可以了,然后使用[]将字符串括起来,这就告诉编译器这是指向的是该字符对应的实际位置,如下: var authorit

微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格式,图片我们可以在线转换,随便搜一下,有很多在线转换工具,但是使用字体图标的时候,怎么转换呢?下面我们记录一下使用图标字体的l两个方法.    方法一:将字体url转换为base64的格式后使用 第一步,下载需要的字体图: 打开阿里巴巴矢量图标库,选择自己需要的图标添加到购物车,然后点击购物车下载代

微信小程序中的iPhone X适配问题 小程序中下方的导航会被iPhone X下面的那条黑线盖住[微笑脸],所以要专门为了iPhone X做样式上的适配[微笑脸] wx.getSystemInfo({ success: function (res) { //console.log(res.model) //console.log(res.language)//zh_CN(en) //console.log(res.model=="iPhone X") if (res.model==&q