微信小程序开发-总结1
发布时间:2021-10-06 12:54:00作者:顺晟科技点击:
什么是微信开发:
微信对外提供了很多功能(如:聊天,支付,分享,收藏等),同时微信还对外开放了很多的接口与能力。
程序员基于这些功能和接口进行的开发,叫做微信开发。
开放平台和公众平台的区别:
开放平台:
-
是微信对外开放
API
接口的平台 -
开放的
API
接口,供第三方网站和App
调用 -
后端程序员是开放平台开发的主力军
公众平台:
-
是基于微信公众号,为微信用户提供服务的平台
-
所用公众号,都属于微信内开发
-
前端程序员是公众平台开发的主力军
小程序出现的目的:
拦截用户流量入口,用户的大多数应用需求,都可以才能够微信小程序中得到满足
小程序适合的业务场景:
适合做 “用完即走” 的应用(如:点外卖,打车,代价,共享单车,购物等)
不适合做 “重度依赖” 的应用(如:大型手机游戏,音乐播放器,视频软件,直播软件等)
小程序和传统手机App的区别
App:基于手机操作系统提供的API进行开发,直接安装并运行在手机操作系统之上
小程序:基于微信提供的API进行开发,必须基于手机微信才能安装和运行
小程序的基本组件:
组件是视图层的基本组成单元,它自带一些功能与微信风格一致的样式。
一个组件通常包括:开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。
所有组件名称与属性名称都是小写。
小程序的基本组件介绍:https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html
小程序项目的结构:
设置小程序项目的默认首页:
app.json中的pages节点。这个pages节点是一个数组,存储了项目中所有页面的访问路径。其中,
pages数组中第一个页面路径,就是小程序项目里的默认首页。
小程序常用的UI组件
1.text文本
selectable:文本是否可选择,除了text组件之外,其他组件都无法长按选中,默认false,boolean类型。
space:显示连续空格,可选择:ensp(英文空格),emsp(中文空格),nbsp,默认值false,String类型。
decode:是否解码,可解析: < > & '    
2.view视图容器(相当于网页开发中的div标签)
hover-class:指定按下去的样式类。当hover-class=‘none’时,没有点击效果。默认值为none,类型是String。
hover-stop-propagation:指定是否阻止本节点的祖先节点出现点击态。默认false,boolean类型。
hover-start-time:按住后多久出现点击态,单位毫秒。默认值是50,类型是number。
hover-stay-time:手指松开后点击态保留时间,单位毫秒。默认值400,类型是number。
3.button按钮
size:按钮的大小。默认值default,类型String。
type:按钮的样式类型。默认值default,类型String。
plain:按钮是否镂空,背景色透明。默认值default,类型boolean。
disabled:是否禁用。默认值false,类型boolean。
loading:名称前是否带loading图标。默认值false,类型boolean。
4.input输入框
value:输入款的初始内容。类型String。
type:input的类型。默认值:‘text’,类型String。
password:是或否是密码类型。默认值false,Boolean类型。
placeholder:输入框为空时占位符。类型String。
disabled:是否禁用。默认值false,类型为boolean。
maxlength:最大输入长度,设置为-1时不限制最大长度。默认值140,类型Number。
5.image图片
1.src:支持本地和网络上的图片
2.mode:指定图片裁剪,缩放的模式
3.aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来。
4.aspectFill:保持纵横比缩放图片,使图片的短边能完全显示出来,图片通常只在水平或垂直方向是完整的。。
image组件默认宽度300px,高度225px
若只写一个<image></image>,也会有一个300*225固定宽高的空白位置
wxss和css的区别:
不同点是:wxss扩展的特性有:尺寸单位,样式导入。
小程序的API
1. API概念:
API应用程序编程接口,是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。
2. API的三种分类:
(1)事件监听API
以 on
开头的 API
用来监听某个事件是否触发
(2)同步API
以 Sync
结尾的 API
都是同步 API
(3)异步API(类似网页端的ajax
通常需要指定回调函数接受调用的结果;小程序中,大多数的 API
都是异步 API
API介绍:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html#API
组件和API的区别:
相同点:都是微信官方提供的,目的都是为了方便小程序的快速开发
不同点:组件以UI结构布局为主,一般不需要处理业务逻辑;API以纯业务逻辑为主,一般没有对应的UI结构
小程序成员管理:登录小程序账号 --> 管理 --> 成员管理 -- 项目成员
开发者权限:开发模块权限,可使用体验版小程序,开发者工具
运营者权限:管理,推广,设置等模块,可使用体验版小程序
数据分析者(基础分析):统计模块权限,可使用体验版小程序
详情查阅:https://kf.qq.com/faq/170302zeQryI170302beuEVn.html
微信开发者工具下载:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
创建小程序项目:
-
打开小程序开发者工具,用微信扫码登录开发者工具
-
点击左侧菜单中的小程序选项
-
点击+号新建小程序项目
-
填写项目名称
-
选择项目存放路径(必须选择空目录)
-
填写
AppID
-
点击新建按钮
小程序预览:
-
点击 工具栏 --> 预览 即可弹出预览窗口
-
预览方式:扫描二维码预览、自动预览
静态页面的内容:
1.html结构标签mui element-ui
结构:text,view,button,input,image
2.css
1.选择器
标签选择器,class选择器,id选择器,伪类伪元素选择器,data-*自定义属性选择器,nth-child nth-of-type 子类选择器
2. 组合选择器的优先级 (* < 标签 < class < id < style < !important)
3. css模块化(模块内部不影响外部:模块独立性,使用导入功能进行相互调用)
-
vue: scoped
-
react: css modules
-
小程序: 样式导入
-
4.适配问题
网页用rem,
小程序用rpx(rpx是微信小程序独有的,解决屏幕自适应的尺寸单位。
统一规定:在横向上屏幕分为750份rpx
rpx对最终显示的css单位的对应关系:
1rpx = 0.5px(设备css单位) = 1设计稿px(基于iphone6进行的2倍750宽度的设计稿)
小程序中的rpx尺寸单位,把所有宽度尺寸的屏幕,统一划分为了750份,不论大屏幕还是小屏幕,
375rpx会被小程序识别,并渲染为屏幕宽度的一半。
官方建议:开发微信小程序时,设计师可以用iphone6作为视觉稿的标准。
如果要根据iphone的设计稿绘制小程序页面,可以直接把单位从px替换为rpx。
例如,假设iphone6设计稿上,要绘制一个宽高为200px的盒子,换算为rpx为200rpx。
5.@import样式导入
可以导入外联样式表
语法格式为:@import "wxss样式表的相对路径"; (分号一定要带上!)
6.全局样式与局部样式
全局样式:定义在app.wxss中的样式为全局样式,作用于每一个页面。
局部样式:早page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器。
当局部样式的权重大于或者等于全局样式的权重时,才会覆盖全局的样式效果!
小程序的唯一标识:appid
- 上一篇 : 微信小程序直播接入指南 - 阿长*长
- 下一篇 : 微信不再提供小程序打开App?借助H5为App引流的方式你必