用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

monsterk1:微信小程序上手篇《一》app入口文件

天下雪 2017-1-12 01:01

作者:monsterk1,来自授权地址 昨天微信公布了小程序,可以说举国轰动,不光是微信前期推广做得好,更是因为小程序有着不小的吸引力,笔者仔细体验了一下小程序示例,可以说体验不错。当然,这篇博文并不是为了说明 ...

作者:monsterk1,来自授权地址

  昨天微信公布了小程序,可以说举国轰动,不光是微信前期推广做得好,更是因为小程序有着不小的吸引力,笔者仔细体验了一下小程序示例,可以说体验不错。当然,这篇博文并不是为了说明小程序多好多好的推荐文,我们今天主要是来讲如何进行学习开发的。

  这篇博文主要适用于有开发经验的开发人员,当然没有开发经验的,也能从文中获取一些知识要点。笔者是一枚毫无css经验,毫无js经验的一名app开发者,暂时来说笔者只看过一些css和js的源代码,所以这篇博文也非常适合和笔者类似的开发者参考,一起学习一起进步。

  废话不多说,我们开始学习.....

  首先,如何成为小程序开发者,随便百度就能搜到官方教程,在此我就不多废话,你可以在这里申请注册,并拿到开发工具->https://mp.weixin.qq.com

  开发界面首页如下:

   

  我们用设定好的开发者微信账号扫描登录即可进入正式页面。

  

  在这里我们选择添加新项目,填入我们的AppID新建项目,就会得到一个官方的demo示例,我们主要是以demo示例中的代码进行学习入门。

  

  这个就是我们的开发界面了,它默认打开的是编辑界面,如果我们想要调试东西,可以点击下面的调试页面,调试我们的代码,寻找bug寻找问题就全靠它了。

  可以看到,此demo一进来就是获取权限,这个东西肯定能在代码中有所体现。而我们的代码架构就在模拟器的右侧,整个架构一目了然,此demo分为了三部分:pages,utils,app的文件。我们可以根据字面意思来理解每一部分的内容。

  pages:顾名思义,是跟我们的界面有关的,所有的页面都在这个文件夹里。

  utils:工具文件夹,工具类的方法都在这里面。

  app的文件:app前缀的有很多文件,我们之后再说它后缀所属性质,总之,这些文件肯定是app的总入口,至于原因,笔者只能说是经验之谈。

  既然知道了入口文件,我们可以依次打开app前缀的文件进行查看(如果看过官方文档更好,因为官方文档里有更详细的说明)。

  app.js,一看就是一个js文件,里面的代码如下:


  1. //app.js
  2. App({
  3. onLaunch: function () {
  4. //调用API从本地缓存中获取数据
  5. var logs = wx.getStorageSync('logs') || []
  6. logs.unshift(Date.now())
  7. wx.setStorageSync('logs', logs)
  8. },
  9. getUserInfo:function(cb){
  10. var that = this
  11. if(this.globalData.userInfo){
  12. typeof cb == "function" && cb(this.globalData.userInfo)
  13. }else{
  14. //调用登录接口
  15. wx.login({
  16. success: function () {
  17. wx.getUserInfo({
  18. success: function (res) {
  19. that.globalData.userInfo = res.userInfo
  20. typeof cb == "function" && cb(that.globalData.userInfo)
  21. }
  22. })
  23. }
  24. })
  25. }
  26. },
  27. globalData:{
  28. userInfo:null
  29. }
  30. })
  可以看到APP({...}),这个方法包含了整个源代码,那么我们可以推断出,要想开发小程序初始化,APP({...})是个最好的选择。

  在APP({...})方法中,拥有三个大属性:onLaunch:function(){}, getUserInfo:function(cb){},globalData:{}。其中onLaunch和getUserInfo是一个方法,globalData是一个类似对象的东西。而从字面意思上可以看出,onLaunch方法应该是一个系统方法,它是在app加载后执行的,而getUserInfo应该是一个自定义方法,因为并不是所有小程序都需要获得权限的公共信息,我们待会来验证这个理论。最后一个globalData,从字面意思上就能知道这个是个全局对象,但是光从这我们并不能知道是个自定义的还是系统的,因此最好看官方文档进行求证(查询官方文档可以知道这是个系统全局)。

  为了验证getUserInfo是否是必须使用的,我们在源代码中将它删除,然后运行。很明显,小程序依旧能够运行,所以说这个方法应该是一个自定义方法,当然不排除是系统的,但是有一点肯定的是,它可有可无,只有在你的应用需要用到公共信息的时候,你可以在此写一个类似方法(后来笔者试着改写方法名,发现可以修改并且能够顺利运行,说明getUserInfo确实是个自定义方法)。

  由上所知,在APP({...})入口方法中,微信支持自定义方法,那应该也支持自定义属性(这个读者可以去试一下)。

  接下来我们继续读代码。


  1. //调用API从本地缓存中获取数据
  2. var logs = wx.getStorageSync('logs') || []
  这句代码很有意思,从字面上看就是获取本地缓存用的,这个方法应该是微信数据存储的一个方法,logs如果有数据返回一个数组,没有就为空的数组。那有趣在哪呢,这只是一个简单的判断,何为有趣?

  我们可以仔细看看代码wx.,不知道大家注意到没有,wx是微信的缩写,点后面是方法,我们在这里可以大胆推论,wx.是微信系统给我们封装的方法,而且这里面绝对有更多的方法。所以,有趣就有趣在很多方法我们不需要自己写,微信已经帮我们封装好了,我们可以试着敲一下wx.,系统自动会给你匹配出不少的方法:

  而且微信很良心的每个方法提示都写成了中文,帮了我们这样的英盲不少忙。


  1. logs.unshift(Date.now())
  2. wx.setStorageSync('logs', logs)

接下来两段代码很简单,笔者虽然不懂js,专门去搜索了unshift方法,这是一个数据插入到数组开头的方法,而setStorageSync很简单,就是一个添加本地数据的方法,它是个同步方法。这样子,我们就可以在每一次进入app的时候添加一个最新的时间到logs的数组中做本地缓存。


  1. var that = this
  2. if(this.globalData.userInfo){
  3. typeof cb == "function" && cb(this.globalData.userInfo)
  4. }else{
  5. //调用登录接口
  6. wx.login({
  7. success: function () {
  8. wx.getUserInfo({
  9. success: function (res) {
  10. that.globalData.userInfo = res.userInfo
  11. typeof cb == "function" && cb(that.globalData.userInfo)
  12. }
  13. })
  14. }
  15. })
  16. }

这段代码是考验非js专业的开发者能力的时候。this应该是引用本实例的一个值,它将它赋值给that的原因从下面的代码中可以判断出来js的一些特性。每一个方法是一个封闭函数,它的上一层实例即为this,所以如果一个方法A包含另一个方法B,在A中使用this指的是A的实例,在B中使用this应该是B的实例,即拥有B的A,所以在这里我们为了拿到A中的实例this,必须要赋一个值给that,让B能使用A的实例。在此demo中,上面的this指的是app这个实例,为了在下面的方法中可以使用app的实例,所以赋了that给this。


  1. if(this.globalData.userInfo){
  2. typeof cb == "function" && cb(this.globalData.userInfo)
  3. }

 这是一个简单的判断,如果全局对象拥有了内容,那么进入这个判断。


  1. typeof cb == "function" && cb(this.globalData.userInfo)
  这句代码对于一个没有js基础的人很难理解,笔者也是花了大把时间才搞懂。

  首先typeof笔者搜到它的用法是判断变量类型了,这也充分说明了后面为什么会存在==这样的语句。其次它判断了cb是否是一个方法,js很方便,只要这样== "function"就能判断一个类型是否是一个方法。最麻烦的是后面的代码cb(this.globalData.userInfo),这段代码如果不结合上下文代码根本不懂其意思,在这里,笔者先卖个关子,因为这段代码得在后面使用到,我可以说明的是这句代码跟传值有关。

  之后的else中我们又看到了老朋友wx.方法,这里有个login方法,我们可以很方便地就能获取到权限信息,一想到我以前app开发经常使用三方,这样的系统方法着实很贴心(虽然本身就是内嵌微信,连这方法都没有,有点说不过去)。


  1. success: function () {
  2. wx.getUserInfo({
  3. success: function (res) {
  4. that.globalData.userInfo = res.userInfo
  5. typeof cb == "function" && cb(that.globalData.userInfo)
  6. }
  7. })
  8. }
  走到这里肯定是登录成功了,在这里wx.getUserInfo可以拿到公开信息,我们在这里就可以通过that访问到app的实例,然后获取它的globalData对象,我们将获取到的信息赋值给他,再走一遍typeof的判断。

  好了,这里是全部的入口方法,很简单,而且是获得了很多微信开发的知识点,我来梳理一下:微信入口方法有必须实现的方法onLaunch和自定义方法,还拥有一个全局调用的对象globalData;微信拥有大量自带的系统方法接口,通过wx.来调用,简单粗暴;js后缀的文件主要是逻辑文件,所有的逻辑写在js中,可以说是脚本文件。

  app.json文件,首先它是个json文件,里面肯定为json格式,然后我们再来看内容:


  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/logs/logs"
  5. ],
  6. "window":{
  7. "backgroundTextStyle":"light",
  8. "navigationBarBackgroundColor": "#fff",
  9. "navigationBarTitleText": "WeChat",
  10. "navigationBarTextStyle":"black"
  11. }
  12. }
  内容不多,但是我们可以清晰看到分为了两大类:pages和window。pages顾名思义是页面的意思,window是窗口。我们可以看到pages中的内容全部是文件路径,对应着我们项目里的内容:

  完全与json中的pages对应,所以我们可以推断出pages里面是为了分页面用的,多少个页面就多少个page。

  而window里面有不少看上去像配置参数的东西,我们将navigationBarTextStyle改为red,如果我们的判断没错,WeChat应该变为红色:

  很明显,我们的判断很正确,所以,总结一下,json文件是一个配置文件,它可以配置内容和显示。

  app.wxss,这个后缀很有意思wxss,这样的后缀肯定是微信独有的后缀。我们打开文件可以看到:


  1. /**app.wxss**/
  2. .container {
  3. height: 100%;
  4. display: flex;
  5. flex-direction: column;
  6. align-items: center;
  7. text-align: center;
  8. justify-content: space-between;
  9. padding: 200rpx 0;
  10. box-sizing: border-box;
  11. }
  如果你会css,或者看过css代码的人一眼就能看出来,这个文件是css样式的微信版本,因此很简单,这个是样式文件。

  在源代码文件中,还有一个后缀文件wxml,app文件并没有这个后缀,因此这个后缀需要我们学习到其他文件再说,下次我们讲index,里面的东西也是很丰富的。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: monsterk1 来自: 授权地址

相关阅读