首先注意这几点:
第一点
首先需要注意的是小程序的大小是有限制的, 整个小程序所有分包大小不超过 8M,单个分包/主包大小不能超过 2M , 所以说8M的限制是要分包至少4个包,单个分包上限其实还是2M;
这里可以看那一下官方提供的文档
第二点
微信小程序开发所用的标签和我们平常所用的div标签不同, 他采用的是 微信小程序内部体用的标签组件;
第三点
微信小程序中使用的尺寸单位是rpx ; 根据官方的定义 rpx 可以根据屏幕的宽度进行自适应的;
可以理解为升级的或者说类似于是 rem;
1rpx = 0.5 px = 1 物理像素
在小程序中可以使用 @import 语句 ;
@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
如 : @import"home.wxss";
第四点
开发微信小程序时才用iPhone 6 作为视觉稿的标准
微信小程序内部的组件分为七大模块分别为:
1 视图容器
view
view 相当于我们之前所用的 div 盒子, 在微信小程序中,需要使用view 来包裹住其他的标签和内容;
可以直接当做div 盒子来用, 但是微信官方有提供其身上的属性
scroll-view
这是微信官方提供的一个可滚动视图区域;可以用\来实现滚动效果,但是你需要个它一个固定的高度
swiper 和 swiper-item
滑块视图容器, 也可以理解为是轮播图; swiper其中只可放置swiper-item组件,否则会导致未定义的行为;
swiper-item 仅可放置在swiper组件中,宽高自动设置为100%;
注: 暂时视图容器只写这一点,因为官方文档提供的很全面; 其他的标签可以使用html的
注: 一般情况下是会和for 组件一起使用,形成 轮播图;
基础内容组件
icon
微信内部提供了图标; 但是不多, 可以参考,但是一般情况下会使用外部的, 比如阿里图标
注意: 微信小程序其实是不支持引入字体样式的;但是有时候我们又不得不需要使用到字体样式, 所以我们会用到:
1 首先你需要下载好本地的 icon ;
2 在小程序的目录下创建iconfont 文件夹, 并将icon的文件放在里面
3 打开里面的 CSS 文件, 将其 CV (复制粘贴) 到 自己新建的 iconfont.wxss文件里
4 在微信小程序中引入这个 confont.wxss 样式
5 使用这个样式 <view class="icon"> <text class="iconfont icon-user"> </text> </view>
当然在其他地方也可以使用, 比如 uni-app中 也可以使用 远程的icon地址
这里就不说了可以看下这个博主写的 如何在uni-app使用iconfont
progress
进度条, 组件属性的长度单位默认为px; 在2.4.0 以后版本也支持rpx
表单组件
表单组件的内容比较多, 这里就随便写几个比较常用的
button
按钮; 跟其他的第三方组件的使用方法和功能差不多,
checkbox
多选项目
editor
富文本编辑器,可以对图片、文字进行编辑。
from
表单 ; 将组件内的用户输入的switch input checkbox slider radio picker 提交。
后面还有很多, 这里就不一一写出来了
官网地址 微信小程序-组件
媒体组件
audio
音频播放
camera
系统相机。扫码二维码功能,需升级微信客户端至6.7.3;(需要用户给权限)
image
图片; 支持 JPG、PNG、SVG、WEBP、GIF 等格式 ; 基本上市面上的图片格式都支持
live-player
实时音视频播放; 暂只针对国内主体如下类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。
live-pusher
实时音视频录制;暂只针对国内主体如下类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发」-「接口设置」中自助开通该组件权
video
视频;
voip-room
多人音视频对话;暂只针对国内主体如下类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发」-「接口设置」中自助开通该组件权
地图功能map
小程序内部有自己提供的地图map;
个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通,详见《微信小程序解决方案》。 小程序内地图组件应使用同一 subkey,可通过 layer-style(地图官网设置的样式 style 编号)属性选择不同的底图风格。 组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)