微信小程序细节部分
微信小程序和HTML区别:
1、开发工具不同,H5的开发工具+浏览器Device Mode预览,小程序的开发基于自己的开发者工具
2、开发语言不同,小程序自己开发了一套WXML标签语言和WXSS样式语言,并非直接使用标准的HTML5+CSS3
3、组件封装不同,小程序独立出来了很多原生APP的组件,在HTML5需要模拟才能实现的功能,小程序里可以直接调用组件。
小程序的两个线程:Appservice Thread和View Thread会同时进行、并行加载,甚至Appservice Thread会更早执行,当视图线程加载完,通知Appservice,Appservice 会把准备好的数据用setData的方法返回给视图线程。
微信小程序细节部分:
1、标签书写方法,所有组件与属性都是小写,以连字符-连接。
<image src="" />
or
<image src="" ></image>
2、文件引入,import可以引入定义好的template模板,模板是有作用域的;而include就是拷贝一个公用的代码片段到目标文件中,适合做公共页面片的拆分。
<!--import-->
<import src="../template/a.wxml"/>
<!--include-->
<include src="../include/footer.wxml"/>
3、wxss,
尺寸:px、rem和rpx,其中rem和rpx可以针对屏幕容器进行适配,px则为固定尺寸。 其中1rpx=0.5px,在WXSS和WXML中定义的rpx单位最终会转换为在手机端可以识别的rem单位。
备注:rpx的单位不光在样式中会自适应,写在WXML的style里也会根据屏幕自适应。
import "../../wxss/common.wxss";样式引入
选择器:包括.class、#id、 element、element,element、::after(注意是双冒号)、::before这6种选择器。
小程序对于:first-child、:last-child、.class-a .class-b{},甚至更多层级的嵌套都是支持的。 不过官方并不推荐级联的这种写法
4、组件
1、view, div和view都是盒模型,默认display:block。 盒模型在布局过程中,一般推荐display:flex的写法,配合justify-content:center;align-items:center;的定义实现盒模型在横向和纵向的居中。
2、text, text可以嵌套text,但不能嵌套view
3、 icon icon可以直接用微信组件默认的图标,默认是iconfont格式的,从WeUI那边沿袭过来的一种做法。 自定义的icon推荐svg sprite格式或者iconfont。
4、input input 的类型,有效值:text, number, idcard, digit, time, date 。 input不需要设置line-height或padding来纵向居中,默认placeholder的文字是居中的。 小程序把checkbox和radio都单独做成了组件,默认的input只支持输入文本。 上传文件在小程序里需要调用chooseImage事件完成;
注意:
小程序CSS里的 :focus 不生效,需要修改placehoder的样式,通过placeholder-class=”class”来定义。
.login .input-group input::-webkit-input-placeholder {
color: #c0c0c0;
}
.login .input-group input:focus::-webkit-input-placeholder {
color: transparent;
}
5、picker 支持普通、日期和时间三种选择器, picker通过bindchange事件来调取range中自定义的数据数据,并展示到页面中,调用的是系统原生的select。
<picker bindchange="bindPickerChange" value="{{index}}" range="{{area}}">
6、 navigator 默认是打开新页面,当前页面打开需要加redirect;navigator仅支持5级页面的跳转;
<view class="picker">
{{area[index]}}
</view>
</picker>
Page({
data: {
area: ['中国', '美国', '巴西', '日本'],
}
})
<!--js里的area数组-->
<!--picker下拉框-->
7、image
scaleToFill{
background-size:100% 100%;//不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
}
aspectFit{
background-size:contain;//保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
}
aspectFill{
background-size:cover;//保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
}
8、button :after的方式去覆盖默认值
button::after {
content:" ";
width:200%;
height:200%;
border:1px solid rgba(0, 0, 0, 0.2);
}
其他:
.media {
display: flex;
justify-content:center;//设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
align-items:center;//定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
}
.media .content {
flex: 1;
}
微信小程序细节部分的更多相关文章
- 微信小程序语音识别服务搭建全过程解析(项目开源在github)
silk v3录音转olami语音识别和语义处理的api服务(ubuntu16.04服务器上实现) ## 重要的写在前面 重要事项一: 目前本文中提到的API已支持微信小程序录音文件格式:silk v ...
- 微信小程序语音识别服务搭建全过程解析(https api开放,支持新接口mp3录音、老接口silk录音)
silk v3(或新录音接口mp3)录音转olami语音识别和语义处理的api服务(ubuntu16.04服务器上实现) 重要的写在前面 重要事项一: 所有相关更新,我优先更新到我个人博客中,其它地方 ...
- 微信小程序开发心得
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...
- 微信小程序体验(2):驴妈妈景区门票即买即游
驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...
- 微信小程序(微信应用号)组件讲解
这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...
- 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新
微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...
- 通过微信小程序看前端
前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
- 来自于微信小程序的一封简讯
9月21晚间,微信向部分公众号发出公众平台-微信应用号(小程序)的内测邀请,向来较为低调的微信在这一晚没人再忽视它了. 来自个人博客:Damonare的个人博客 一夜之间火了的微信应用号你真的知道吗? ...
随机推荐
- N个小时学SAP ABAP
接触SAP已将近3年了,期间ABAP资料也看了不少,都是东看一点.西看一点的,也没做个笔记之类的,很明显效果不是很好.今天突然间领悟到了一点:不能再这样漫无目的的学习了,应该一本书一本书的看,否则就太 ...
- windows下简单安装postgres
目前版本是PostgreSQL 9.6,它经过以下平台认证: 32位Windows Windows 7,8和10 Windows 2008 Server 64位Windows Windows 7,8和 ...
- SpringCloud:(一)服务注册与发现
最近跟着方志明老师学习SpringCloud,博客地址如下: https://blog.csdn.net/forezp/article/details/81040925 自己也跟着撸了一遍,纸上得来终 ...
- Vue模版编译
一 模版文件 <div> <header> <h1>I'm a template!</h1> </header> <p v-if=&q ...
- Python文档操作
1.打开和关闭文件 open('C:\Users\Second One\Desktop\a.txt')文件路径必须完整路径且为字符串格式 有三种方式: open('C:\\Users\\Second ...
- 创建一个项目并在GitHub上发出拉取请求
1.第一步:创建存储库 创建新存储库: New repository 命名存储库 写一个简短的描述 选择使用自述文件初始化此存储库 2.第二步:创建一个分支 创建一个新分支 转到新的存储库hello- ...
- 三、Zabbix-zabbix server部署-zabbix server
LNMP基础环境准备完成,进行zabbix server部署参考官方文档: [https://www.zabbix.com/documentation/3.4/zh/manual/installati ...
- HNUSTOJ-1258 Time
1258: Time 时间限制: 1 Sec 内存限制: 128 MB提交: 16 解决: 11[提交][状态][讨论版] 题目描述 Digital clock use 4 digits to e ...
- 二、JVM — 垃圾回收
JVM 垃圾回收 写在前面 本节常见面试题 本文导火索 1 揭开 JVM 内存分配与回收的神秘面纱 1.1 对象优先在 eden 区分配 1.2 大对象直接进入老年代 1.3 长期存活的对象将进入老年 ...
- BZOJ 5317: [Jsoi2018]部落战争
传送门 写出式子,若存在 $a \in A$,$b \in B$,使得 $b+v=a$,那么此方案会产生冲突 即存在 $a \in A$,$b \in B$,使得 $v=a+(-b)$,设 $C=A+ ...