当前位置:文档之家› 微信小程序开发技术介绍

微信小程序开发技术介绍

微信小程序开发技术介绍-北京锐智互动
小程序相对于app大部分公司还是不愿意将主营业务放到微信平台上,以免受制于与腾讯,不过随着现在小程序生态的逐渐形成,小程序也逐渐融入每个人的生活当中,日活动用户量高达2亿多,学习门槛不高,学习简单,就是说小程序就基于为您平台的H5的轻应用。

微信把系统底层功能和微信自身功能封装成API提供给小程序使用。

小程序的布局
小程序代码编写一样使用JS来完成。

但结构和样式推出了
1.WXML:是微信设计的一套标签语言,他和HTML类似,全名叫:Weixin Markup Language
2.WXSS:是一套样式语言,用于定义样式和CSS类似,被认是CSS的子集全名:Weixin Style Sheets
因为小程序中UI组件都是用Native实现所以小程序直接放弃使用HTML容器这样的好处是为了更好的限制,因为入口为index.html文件,将全局控制器app的实例化放到main.js 里面,实际上HTML还是太过灵活,从某个角度来说小程序的做法是值得认可的,
小程序实现的基本概念
1.标签的出现根本不是做标签用,而是为了让JS捕捉执行相关逻辑,最后生成真正的标签
2.为了做更好的限制,小程序不提供入口index.html文件,所以这里的标签时用作JS 做博班解析后生成Native能去识别的代码,具体点说就是Native实现了一个组件组件有很多规则,可以使用JS去调用,正如这里的Header组件调用逻辑,JS会设置Native的Header 组件展示。

小程序的组件
Swiper组件:大图滚动组件:一般时候在banner那里,要加上大图滚动的效果,这个组件可以很轻易的帮助我们完成这个任务。

Indicator-dots:后面接布尔值,是否显示面板指示点
Indicator-color:色素值,指引点的颜色填充
Indicator-active-color:色素值,当前的指引点填充颜色
Autopaly:布尔值,是否自动切换
Current Number:当前所出模块index,从0开始
Interval:自动切换时间间隔
Duration:切换动画的时长
Circular:是否采用链接滑动
Vertical:是否为薯竖直方向的大图滚动
Pervious-margin:露出前一块的多少PX/rpx,接数值
Next-margin:露出后一块的多少Px/rpx,接数值
Display-multiple-items :显示多少个滑块
Bindchange:滑块滑动的时候出发事件
Bindanimationfinish:滑块的动画结束的时候出发时间
总结
小程序Native层是将常用的HTML标签分别都实现了一次,使用这些自检可以拼接出任何复杂的组件,至于样式方面,wxss与css大同小异,其中主要区别是小程序没有使用px 而是会用rpx 这个类似于rem的实现为了解决移动端的适配问题而存在。

相关主题