开发小程序(微信)---基础

首先注意这几点:

第一点 

    首先需要注意的是小程序的大小是有限制的, 整个小程序所有分包大小不超过 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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。