AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:03:42

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:CSDN知识库:不可错过,微信小程序技术大起底
相关的资讯,希望对您有帮助。

CSDN知识库:不可错过,微信小程序技术大起底

本文来自CSDN知识库,作者为CSDN知识库特邀编辑刘玉刚,CSDN博主伟凯共同撰写微信小程序源码和小程序MINA框架现代化前端技巧,小程序与传统APP区别微信小程序DEMO案例分析阅读本文需要10分钟小程序是微信推出的一种 ...

本文来自CSDN知识库,作者为CSDN知识库特邀编辑刘玉刚,CSDN博主伟凯共同撰写
  • 微信小程序源码和小程序MINA框架

  • 现代化前端技巧,小程序与传统APP区别

  • 微信小程序DEMO案例分析


阅读本文需要10分钟





小程序是微信推出的一种新的公众号的形态,不需要下载安装即可在微信中使用的应用,小程序、订阅号、服务号、企业号是并行的体系。


微信小程序源码结构


  • 视图层(将逻辑层的数据展现在视图上)

  • 逻辑层(通过改变数据[setData方法]来改变视图)


配置文件


在小程序中,微信规定了界面的组成模式,由四个文件组成。


  • .wxml文件(页面结构文件)标签语言,类似html,真正负责页面结构的文件,可以绑定数据

  • .wxss文件(样式表文件)类似css,大部分css样式都相同

  • .js文件(脚本文件)用来运行我们的逻辑,使用js语言

  • .json文件(配置文件)主要配置公用的样式,比如tab栏,窗口样式等





微信小程序框架:MINA


MINA 组件

基本:view,text

表单:button,input,radio,slider

媒体:image,video,audio,canvas

模态:action-sheet,modal,toast,loading

容器:swiper,scroller

导航:navigator,tabbar


小程序融合了很多前端开发界的概念,但是并没有采用任何一个框架,包括流行的REACT、VUE,还有CORDOVA。它不是三者中的任意一个,而是拼凑出一个新的框架。


它的框架看起来既像 H5,又像原生。小程序用的是H5 代码,但又不遵从 H5 的标准写法。很多方面借用了 Web 技术,但细节不太一样。


非标准标签(组件)


我们知道写浏览器用的都是标准的主键,但是在 MINA 里面,小程序自成一个体系,虽然后台还是一样用浏览器的主键去实现的,但是在前面写 HTML 的时候加上它自己的一套标准。


非标准CSS


rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.


非标准事件系统


当按下一个按钮的时候分配一个事件,这个事件也是非标准的,但是跟非标准很像。包括冒泡阶段和捕捉阶段。


非标准 JS API


支持微信的接口,但是没有任何标准 JS接口。


不能操作 document 或者 DOM


虽然是在浏览器里面运行,但是不能操作浏览器本身,不能操作原生文件本身,只能用Virtual DOM 去改变页面。


有些组件有奇怪的默认高宽(scroller,image)


通常在 Web 浏览器里面,主键是按图片内容的高度,基本上所有组件默认高宽都是0,小程序的image是按照background-image来实现的,所以所有图像会得到一个初始宽高320 240,而且无法通过auto重置,只可以通过具体的值来重写。


Require


因为小程序自成一个体系,JS 的包、CSS 框架都不能用,全部都要重新开始。


1M打包上线


能够更快地下载





现代化前端技巧


Virtual DOM


开发者写 iOS 和原生的 h5 应用的时候,很多时候是手动地去操作 UI,用户按按钮之后改变页面。当应用很复杂的时候在改变的过程可能就会产生错误,Virtual DOM每次要去改变一个界面的时候,重新把界面做一次再进行修改,避免出错。


MVVM


分离逻辑和数据


组件化


功能、风格模块化,每个风格封装在组件里就不会泄露。




小程序与传统APP区别


微信小程序和传统的APP存在较大的差异,所以在设计小程序时不能以传统APP的思维来实现,要采用与之相匹配的小程序思维进行设计。那么,可以从以下6个关键词中思考:


1) 轻量:让用户便捷、迅速、简单地获取服务,不要挑战微信的产品观。


2) 社交:必须和微信生态融入,那就必须考虑到微信的生态基因。抛开社交关系链做的话,最大的可能性是过于平庸导致反响平平。价值:小程序本身不是为了哗众取众,必须对用户有切实的价值,能够让用户在有需要时主动进入,主动唤醒。


3) 引流:对于第三方来说,微信必须是重要的流量入口。在微信允许的范围内,用可能的手段获取用户流量,是我们需要着重考虑的。


4) 数据:即便没有引流成功,至少要获取用户数据,支持自有APP开展业务。


5) 生态:如果已经有了微信公众号、服务号,在微信生态内考虑和小程序相互依托,互为补充。



图谱来自CSDN知识库


访问 lib.csdn.net,获得更多技术内容






微信小程序入门Demo-伟凯分享



在本篇的例子中,我们用到了以下知识


1、事件的绑定

2、微信小程序的条件判断语句

3、事件对象数据的传递

4、js的random函数运用


由于我们只是对整个demo逻辑的实现,我对界面就比较随意。我们主要是运用下小程序中以上用到的知识点,界面优化可以交给各位读者自己实现自己的小游戏Demo的时候进行优化。



首先,我们看page的js代码。首先我们在data中写了一个gama数组,用来对应石头剪刀布的每一种情况,0对应石头,1对应剪刀、2对应布。

其中computer用来记录计算机所出的情况,my用来记录我们选择的情况。



btnclick:function(e)主要用来处理点击事件,其中e是方法的回调,当我们触发了点击事件,小程序会调用该方法并传入一个Object对象,这个Object对象主要存储了点击事件的一些信息。其中当我们点击剪刀的时候,我们可以看到在Object的currentTarget下有个dataset中有个choose记录了我们的选择。


我们使用了Math中的round函数和Math中的random函数,其中random会产生0-1之间的数,当我们*2时,random函数就会生成0-2之间的一个随机自然数,然后我们通过round函数,进行四舍五入。接着通过this.setData({computer:random})我们将得到的0-2之间的随机数设置给computer对象。因此我们就完成了使计算机随机选择石头剪刀布中的一种情况。


最后是我们选择的情况,我们this.setData({my:e.target.dataset.choose}),将我们的选择设置给my对象。


接下来我们来看我们的布局文件



这是一个wx:if的判断语句,通过我们之前设置的computer和my对象,进行显示计算机和我们的选择,其中条件逻辑包括wx:if、wx:elif和wx.else。


再来看我们的image标签,就说两点,一点是事件的绑定和事件对象数据的传输:


1、事件的绑定:



微信小程序为我们提供了以上的冒泡事件列表,那会有同学问,什么叫冒泡事件呢,在安卓中事件的传递都是通过父控件一层层往下分发。


而在微信小程序中这个冒泡事件其实很形象,就是当事件触发时,会从触发的控件一层层往父控件进行传递。而非冒泡事件则不会向上父控件进行传递事件。


其中bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。


在这里因为我们无所谓要不要要不要阻止事件向父控件传递,所以我们就用bindtap进行事件绑定就好了。事件绑定已key,value的形式进行绑定,我们通过 bindtap=btnclick绑定了我们之前定义的事件处理方法。


2、事件对象数据的传递


在组件中可以定义数据,这些数据将会通过事件传递给SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在event.target.dataset中会将连字符转成驼峰elementType


其中我们看到我们这里写了一个data-choose并让它对应石头剪刀布的对应的值,当我们点击这个image的时候,我们就能通过我们事件处理方法中的e.target.dataset.choose进行获取控件传递过来的值。


最后我们就是根据计算机随机产生的结果和我们选择的结果,进行输赢结果的判断,然后进行输出就好了。



30阅读 | 0评论
你的回应
写文章

7065