zoukankan      html  css  js  c++  java
  • 全栈工程师之路中级篇之小程序开发第一章第三节阅读官方demo

    在网上好多人,喜欢找别人写好的一些线上的项目源码,比较完整的。想着学习的更加实用和全面一点。

    这无可厚非,但是,我发现有好多人并不是很在意官方提供的demo。

    比如ionic的tabs demo就没有什么人看。

    我个人觉得既然官方把这样的demo推到了入门的地位,那必然是有它的道理的。

    所以我很喜欢从官方的demo开始学习,因为它足够简单,又足够让我明白它的用法和逻辑。

    上一节课,我们已经讲解了如何新建一个项目,并且讲解了工具里面的一部分功能。

    剩下的在项目开发中比较常用的,不容易被忽略的,上一节就没详细讲解。会在之后的开发中介绍。

    一、目录结构


    小程序规定一个页面对应四个文件。(其中有的必须有的非必需,太麻烦了,反正记下来四个文件就好)

    *.js 小程序的逻辑文件

    *.json 小程序的配置文件

    *.wxss 小程序的样式文件--相当于css

    *.wxml 小程序的页面结构--相当于html

    每一个子页面都对应四个上述的文件。

    在根目录下还有三个文件,可以理解为存放公共配置、公共逻辑、公共样式的地方。

    这么理解吧,小程序会首先使用这外面的三个文件。如果子页面自己的相应文件做了修改,则会使用子页面的配置和样式。

    接下来我们打开app.json文件


    看第一个page属性,是一个字符串数组,用于配制子页面的文件路径。

    注意数组的第一项就是打开小程序时的主页面。

    还有这里有一个新建页面的技巧,最开始我新建一个页面是先新建一个文件夹,然后在文件夹里面新建四个文件,最后再在配置表里面添加路径。

    有一次由于拼写错误,发现,工具自动新建里一个文件夹和页面所需的文件,并且文件里面还写了必要的内容。

    如:在page里面写上"pages/test/test". 按ctrl+s保存(Mac用command+s),工具就自动创建了四个文件了。


    接着看app.json里面的window属性。

    window属性用来配置小程序的状态栏、导航栏、标题和窗口的背景色。注意每个子页面都可以在自己的json文件里面,单独对上述这四个属性做单独的配置。

    除了图中四种属性,还有enablePullDownRefresh 是否开启下拉刷新。

    接下来我们打开app.wxss


    这个属于公共的样式表,只要在这个文件中定义的样式文件,可以在任何子页面中调用。

    而在子页面中定义的独立样式,则只能在自己的结构文件中调用,子页面之间不能相互调用。

    /util/util.js

    工具文件,编辑一些常用工具方法,用的比较多的就是用来配置服务器请求路径。

    这应该是用来做公用方法的,但是公用方法又可以写在app.js中,所以我也不是太清楚,这个文件的意义是什么。

    接下来我们来看一下,我们刚刚新建的test.js文件。

    // pages/test/test.js
    Page({
      /**
       * 页面的初始数据
       */
      data: {
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
      },
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
      },
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
      },
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
      },
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
      },
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
      }
    })

    这个新建的文件,比demo现有的代码能让我们更清楚的知道小程序的生命周期。

    我们现在每一个勾子函数中打印出相应的日志。

    如:


    修改app.json文件,将test页面修改成默认页面


    -------------------2017年5月14日编辑到这里,2017年7月28日接着编辑,有点忘记这小节要讲什么了,补充一点算一点吧。---------------------------


    打开工具-调试-console查看,打印日志。可以查看勾子函数的调用顺序,了解小程序的生命周期,其他没打印的函数,看名字,应该能明白。

    其中两个函数,这里可以重复提一下。onPullDownRefresh(监听用户下拉动作)、onReachBottom(页面上拉触底事件的处理函数)


    这两个函数onPullDownRefresh用于下拉刷新页面,可参考微信朋友圈,下拉拉取朋友们最新发布的朋友圈消息。

    onReachBottom是用户加载更多列表,同样参考微信朋友圈,下拉拉取更多朋友圈列表历史记录,分页加载更多数据的概念。

    接下来让我们重新回到最原始的demo里查看index里面的内容。

    修改app.json,将"pages/index/index"设置成page数组的第一项,是index页面作为启动页。

    打开// pages/index/index.wxml


    现在把所有的关注点集中在上图我标记的位置(我打开的时候我电脑里面的demo我做过一点点修改,可能跟原来的不太一样,但是这几个地方没有变化,不要太较真哦)

    1、先看第二行class="container"这个和传统的html中的用法一样,只是对应文件wxss中的.container{}

    2、标签,在小程序中,所使用的标签全是微信做过封装的,可以按照html的标签去理解记忆这些标签,但是不能完全等同,应该查阅详细的api看看有什么属性,便于后续的开发,可能你要的什么功能,微信已经封装好了。

    3、src=“{{地址变量}}”’这个和ng中的绑定数据很像,只是直接使用src,注意双大括号要当在双引号里面。

    4、在标签中的绑定数据也是用双{{}},现在好多新的框架基本上都是这么做的,注意这里双大括号不需要放在双引号里面。

    5、bindtap="bindTiewTap" 事件绑定,这里先略过,后续的详细的出一节讲解所有的绑定事件,也可查阅官方文档。

    接下来我们先深入的看小程序的数据绑定,这里我们从上图中的标记4{{'你好,'+userInfo.nickName}}入手了解。

    这里可以知道这里的数据绑定了userInfo变量的nickName属性。那这个userInfo又是从哪里来的呢?

    接着我们打开文件// pages/index/index.js


    看第五行的data,我们知道userInfo是这个data的一个属性。这里我们知道小程序把界面绑定在了他相对应的js的data中。

    这么理解吧,js中的Page对应一个界面。

    看第3行,创建了一个变量app通过全局方法,getApp()获取了当前应用实例。

    在19行中调用了app.getUserInfo的方法。这里可以跟进查看到上一层的app.js中


    这里我们就知道了,在index.js中调用getApp()方法获取的就是app.js中的这个App();


    接下来我们把注意力集中在getUserInfo这个方法中,这里出现一个wx.login()方法。

    这里我们并没有人任何一个地方定义了wx变量,所以这里可以知道,小程序中把wx作为官方API的保留关键字。这里调用了微信的登录接口,获取了用户数据。

    那么这一整个流程就是进入index界面-调用onload方法-调用app.js中的getUserInfo方法-调用微信登录接口-获取用户数据-通过回调函数cb-回调到index.js中-

    将数据赋值给data的userInfo-传递到界面中的{{userInfo.nikeName}}实现数据展示。

    其实要深究的话这个demo还有不少内容,介于篇幅将其他的内容放于后续的章节中讲解。

    这节课的内容就到这里结束了。

    感谢您的阅读。

    我是小虎(最近把名字改成了莽夫,觉得比较符合我的性格特征,说好的行不改名坐不改姓呢,捂脸),希望你开心。

    有什么问题可以直接联系我的个人微信yu_xiaohiu

    希望大家关注我的个人公众号ionic_





  • 相关阅读:
    推荐系统 蒋凡译 第一章 引言 读书笔记
    神经网络与深度学习 邱锡鹏 第5章 卷积神经网络 读书笔记
    神经网络与深度学习 邱锡鹏 第4章 前馈神经网络 读书笔记
    神经网络与深度学习 邱锡鹏 第3章 线性模型 读书笔记
    神经网络与深度学习 邱锡鹏 第2章 机器学习概述 读书笔记
    神经网络与深度学习 邱锡鹏 第1章 绪论 作业
    神经网络与深度学习 邱锡鹏 第1章 绪论 读书笔记
    算法笔记 上机训练实战指南 第13章 专题扩展 学习笔记
    算法笔记 第13章 专题扩展 学习笔记
    算法笔记 上机训练实战指南 第11章 提高篇(5)--动态规划专题 学习笔记
  • 原文地址:https://www.cnblogs.com/xiaohuoni/p/7642274.html
Copyright © 2011-2022 走看看