|
|
|
|
移动端

1.1 什么是微信小程序

《微信小程序开发入门精要》第1章微信小程序入门,从本章开始,让我们深入了解微信小程序的原理以及详细的开发过程。本节为大家介绍什么是微信小程序。

作者:李宁来源:人民邮电出版社|2017-12-13 14:51

年前最后一场技术盛宴 | 1月27日与京东、日志易技术大咖畅聊智能化运维发展趋势!


第1章 微信小程序入门

微信小程序是腾讯在2016年9月推出的一种新型的微信扩展。尽管目前还没有正式开发,但依然受到了非常多的关注。这主要是由于腾讯的影响力,以及微信在国内拥有的庞大的用户群体。在2017年1月9日,腾讯已经正式上线了小程序,这意味着任何人都可以在手机微信中使用小程序。由于目前小程序的数量还不多,所以现在进入小程序开发领域,可能会赶上小程序的第一拨红利。OK,废话少说,从本章开始,让我们深入了解微信小程序的原理以及详细的开发过程。

本章要点

什么是微信小程序

注册小程序账号

获取小程序的AppID

设置小程序信息

配置微信小程序的开发环境

微信小程序的结构

开发第一个微信小程序:猜拳游戏

1.1 什么是微信小程序

微信小程序刚一公布,朋友圈就被微信小程序刷爆了!“微信之父”张小龙说:“小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。这也体现了‘用完即走’的理念,用户不关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载”。

我也看了网上的一些关于微信小程序的文章,但内容质量良莠不齐。好吧,我就通过本节让大家了解一下什么是微信小程序,以及微信小程序到底能为我们带来什么。

由于之前有微信公众号,而公众号里面的程序其实就是将移动Web(主要是HTML5、CSS、JavaScript等技术)嵌入到微信中,当然,会调用一些微信提供的API。所以很多人自然而然会想到微信小程序用的也是HTML5。但事实是,微信小程序和HTML5,甚至和Web,没有任何关系。因为Web的性能低下,尤其对于那些追求完美的人,在手机上使用Web简直不能忍受。千万别说,等以后手机性能发展到和现在的PC一样就好了,估计等到那时候,会出现比手机更小巧,当然,性能也更差的设备。如果手机成为了PC,那么这些新出现的设备将会取代现在手机的位置。就像人们永远等待新产品降价再买,但等到这些产品真降价了,又会有更好的产品问世,很难等到既享受新产品,同时又享受低价的时候。

既然说微信小程序和Web一点关系都没有,那么有什么证据呢?这一点从微信小程序官方文档的描述中就可以看出。感兴趣的读者可以通过下面的地址查看微信小程序官方文档。

https://mp.weixin.qq.com/debug/wxadoc/dev/

微信小程序主要由3个全局的文件和一些与页面有关的文件组成,全局文件包括app.js、app.json和app.wxss。其中,app.js是JavaScript文件,用于编写全局的事件,例如微信小程序启动时要执行的代码,类似于iOS工程中AppDelegate.m文件的作用;app.json用于配置微信小程序,例如由哪些页面组成,类似于Android工程中AndroidManifest.xml文件的作用;app.wxss是公共样式表,用于设置整个工程都可以使用的样式,类似于Android中的theme或style资源,全局都可以使用。

可能有人会问,微信小程序不是使用了JavaScript吗?难道和Web没有关系?这里需要明确,JavaScript只是一种语言,未必用在Web上,JavaScript同样可以用在服务端,如Node.js,当然也可以用在移动端,作为独立的语言运行。

微信小程序的页面部分由4个文件组成,这里的页面实际上就是窗口。假设页面名字为index,那么该页面由index.js、index.wxml、index.wxss和index.json组成。index.js用于编写页面的逻辑代码;index.wxml是腾讯自己设计的一种标记语言,可以称为微信标记语言,用于描述UI;index.wxss是针对该页面的样式表,是私有的;index.json是针对页面的配置文件。

这里关键点是index.wxss,用过React Native的读者应该很熟悉JSX,它是一种描述UI的类XML语言。其基本原理是通过XML文件描述UI,并动态创建原生的UI。例如,React Native用View来描述顶层视图,用Text来描述文本输出控件,那么我们可以使用下面的代码来模拟这一动态创建过程。

Android:

  1. View component = null;  
  2. if(tag == "View")  
  3. {  
  4. component = new ViewGroup(…);  
  5. }  
  6. else if(tag == "Text")  
  7. {  
  8. component = new TextView(…);  

iOS:

  1. UIView *component;  
  2. if(tag == "View")  
  3. {  
  4. component = [UIView new];  
  5. }  
  6. else if(tag == "Text")  
  7. {  
  8. component = [UILabel new];  

上面描述的是基本的动态创建组件的过程,当然,实际的实现过程要比这个复杂得多,这里只做了原理上的描述。很显然,系统会根据不同平台,以及在JSX中的描述,生成不同的原生组件。

React Native使用的是JSX,类似地,微信小程序使用的是wxml(微信标记语言),它是一种腾讯自己设计的类JSX的语言,下面是wxml的代码示例。

  1. <view class="container"> 
  2. <view bindtap="bindViewTap" class="userinfo"> 
  3. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover" 
  4. ></image> 
  5. <text class="userinfo-nickname">{{userInfo.nickName}}</text> 
  6. </view> 
  7. <view class="usermotto"> 
  8. <text class="user-motto">{{motto}}</text> 
  9. </view> 
  10. </view> 

下面则是JSX的代码示例。

  1. <View style={{flex:1}}> 
  2. <DrawerLayoutAndroid 
  3. ref={drawerLayoutAndroid => { this.drawerLayoutAndroid = drawerLayoutAndroid; }}  
  4. drawerWidth={150}  
  5. drawerPosition={DrawerLayoutAndroid.positions.left}  
  6. renderNavigationView={() =>navigationView}> 
  7. <View style={{flex: 1, alignItems:'center'}}> 
  8. <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>我是主布局内容  
  9. </Text> 
  10. </View> 
  11. </DrawerLayoutAndroid> 
  12. <View style={{flexDirection:'row'}}> 
  13. <Text style={{flex:1}} onPress={this.onPress.bind(this)}>Open</Text> 
  14. <Text style={{flex:1}}  
  15. onPress={()=>this.drawerLayoutAndroid.closeDrawer(0)}>Close</Text> 
  16. </View> 
  17. </View> 

从上述的两段代码可以看出,JSX和wxml非常相似,只是具体的组件名称和命名风格不同。例如,JSX所有组件名称首字母都大写(例如Text),而wxml所有组件名称首字母都小写(例如text),此外,组件属性也有一定的差异。

不管JSX和wxml的代码风格是否一样,系统处理它们的原理都是一样的,即根据这些代码自动生成原生的组件,就像前面描述的动态创建原生组件的过程一样。

尽管小程序本身和HTML5无关,但“微信Web开发者工具”(开发小程序的IDE)本身却和HTML5有很大的关系。开发“微信Web开发者工具”的技术是NW.js(node-webkit),这是一种允许使用HTML5、CSS和JavaScript开发跨平台(Windows、Mac OS X和Linux)桌面应用的框架,和NW.js类似的框架是Electron(Github主导的开源项目),用Electron开发的著名项目包括Atom IDE、Visual Studio Code、WordPress等。也就是说,不管是NW.js,还是Electron,都足够强大,以至于可以开发IDE和很多系统软件。尽管这两个框架都使用了HTML5作为UI描述,但在PC上,HTML5的性能表现良好(毕竟PC的CPU足够强大)。如果读者对使用Web技术开发跨平台桌面应用感兴趣,可以关注我的博客(http://geekori.cn),我会不定期推出相关的技术文章。



喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

系统分析师考试辅导(2007版)

《系统分析师考试辅导(2007版)》内容涵盖了最新的系统分析师考试大纲信息系统综合知识的所有知识点,分析了近3年信息系统分析与设计案例...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊