微信小程序入门篇(二)

上篇 微信小程序入门篇(一)我们讲解了一下小程序的整体架构,今天来讲一下,一个页面的具体实现原理,好注意听,下面要开始画重点啦~哈哈

页面的构成


  1. 还记得我们在上篇文章中讲解如何加入一个界面吗?在app.json中的pages加入要加的文件路径就可以啦,文件路径可以随便起,系统会自动创建出来的,那么我就接着之前的讲,我们之前创建了一个页面叫addPage,addPage里面包含四个文件addPage.js、addPage.json、addPage.wxml、addPage.wxss这四个对应的作用是什么呐?
    • addPage.js 页面数据的存储,网络请求的加载都是在这里
    • addPage.json 用于设置导航栏样式,和app.json性质一样,如果没设置样式,默认用app.json中的样式
    • addPage.wxml 页面的效果都在这里面,就是展现给用户的界面
    • addPage.wxss 页面样式设计,页面的一些样式属性都写在这里
![1-1.png](http://upload-images.jianshu.io/upload_images/1750086-f4a28e737f424802.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

页面的解析


  1. addPage.js解析

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    // pages/addPage/addPage.js
    Page({

    /**
    * 页面的初始数据
    */
    data: {

    },

    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
    console.debug("onLoad--监听页面加载");
    },

    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function () {
    console.debug("onReady--监听页面初次渲染完成");
    },

    /**
    * 生命周期函数--监听页面显示
    */
    onShow: function () {
    console.debug("onShow--监听页面显示");
    },

    /**
    * 生命周期函数--监听页面隐藏
    */
    onHide: function () {
    console.debug("onHide--监听页面隐藏");
    },

    /**
    * 生命周期函数--监听页面卸载
    */
    onUnload: function () {
    console.debug("onUnload--监听页面卸载");
    },

    /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
    onPullDownRefresh: function () {
    console.debug("onPullDownRefresh--监听用户下拉动作");
    },

    /**
    * 页面上拉触底事件的处理函数
    */
    onReachBottom: function () {
    console.debug("onReachBottom--页面上拉触底事件的处理函数");
    },

    /**
    * 用户点击右上角分享
    */
    onShareAppMessage: function () {
    console.debug("onShareAppMessage--用户点击右上角分享");
    }
    })

    这里面注释都是系统自动创建的,我没动,注释写的很清楚,我没什么要多说的啦,差别是我在每个方法里加入了console.debug()这个是以后调试bug会用到的,输出日志,就是以后程序出现的问题就靠他输出来,我加入的目的就是要展示一下,系统启动小程序都执行了那些方法,怎么测试系统执行了那些方法呐?

    • 第一步,改动跳转的代码,首先找到pages/index/index.js,修改bindViewTap方法里的url,路径改为addPage的路径,这样页面跳转的时候就会跳到addPage界面啦,修改过的代码记得保存,否者效果无效!

      1
      2
      3
      4
      5
      6
      bindViewTap: function() {
      wx.navigateTo({
      //url: '../logs/logs'
      url: '../addPage/addPage'
      })
      },
    • 第二步,找到菜单栏的调试按钮,切换到调试模式,找到Console控制台,选着All或者Debug模式,Console会输出日志信息,接下来点击一下helloWord上面的用户头像,看看会出现上面效果,如果操作没错的话会出现下面的效果,

      2-1.png
      看控制台输出的信息,理论上是会出现三行蓝色字,第四行是因为我还执行了一个返回键的操作由此可判断,当点击返回键时执行onUnload方法,还有当页面加载的时候方法执行的先后顺序为onLoad->onShow->onReady,我们只要知道页面的生命周期就好,至于具体的调用,我们在后面实战的时候讲解,还有如果你点击界面三个小点,然后执行转发操作,就会执行onShareAppMessage方法,具体我就不演示啦,addPage.js中还有的方法是onHide、onPullDownRefresh、onReachBottom,当A跳转到B时候,A就会执行onHide的方法啦,onPullDownRefresh下拉刷新数据会用到,onReachBottom用于底部加载更多,这些都放在后面在讲解电商开发的时候一起讲。好,关于addPage.js就讲解到这里

  2. addPage.wxml与addPage.wxss

.wxml与.wxss构成了整个界面,我们自己新建的addPage文件没什么样式,所以我就拿index.wxml和index.wxss来讲解

  • index.wxml

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

    2-2.png看代码对应的视图,从代码看过去黑色框(view)包含两个黄色框(view),第一个黄色框又包含两个image和text,界面布局大致就是这样,看里面具体代码,黑色框view里有一个属性class,这个class可以理解为ID这个class是用来关联index.wxss,可以理解为黑色框的view设置为”container”的样式,继续看第一个黄色框View,同理可以知道第二个黄色框View的样式设为”userinfo”,咦,bindtap是什么意思呐?bindtap你可以理解为事件监听,系统定义的固定字段,写事件一定会用到这个,还记得上面我们做的测试系统执行的方法时,不是有修改过index.js中”bindViewTap”的方法嘛,这个”bindViewTap”是自定义的方法名,可以随意修改,但是bindtap字段是不可修改的否则代码无效,再说说绿色框中的text,有没有注意到,这个就是给视图赋值,就是界面上你看到的HelloWord就是这么设置的,”motto、userInfo.nickName”字段是在index.js中的data里面,这里要强调的是我们在调用index.js里data数据时,赋值的时候要记得加入两个中括号,这样系统才能识别数据。

  • index.wxss

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /**index.wxss**/
    .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    .userinfo-avatar {
    width: 128rpx;
    height: 128rpx;
    margin: 20rpx;
    border-radius: 50%;
    }
    .userinfo-nickname {
    color: #aaa;
    }
    .usermotto {
    margin-top: 200px;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /**app.wxss**/
    .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 200rpx 0;
    box-sizing: border-box;
    }
    ![2-3.png](http://upload-images.jianshu.io/upload_images/1750086-13a7439527e75866.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    结合效果图一起看样式代码,看到"userinfo"和"container"是不是眼熟,就是之前在index.wxml中class的样式,我们在wxss定义好样式,就是通过这些字段把index.wxml和index.wxss关联起来,才有的上面的界面效果

wxss样式积累


wxss样式里代码看不懂可以查阅这里,如果没找到对应样式,请自行百度喽,这些也是代码君问的度娘

  1. display属性
    • none:此元素不会被显示
    • block:两个元素自动换行
    • inline:两个元素靠在一起
    • inherit:继承父类
    • flex:多栏多列
    1. flex-direction:
    • column 垂直分布
    • row 水平分布
    1. flex-wrap:
    • nowrap item溢出不换行
    • wrap 超出的item跳到下一行
    1. justify-content属性
    • flex-start:左对齐
    • flex-end:右对齐
    • center:居中
    • space-between :item中间留出等间距
    • space-around:环绕item流程等间距
    1. align-items item 边界线对齐方式
  • flex-start | flex-end | center | baseline | stretch
    1. border-bottom 边界线
  • 举个栗子 1px solid #ccc;
    1. align-items item 边界线对齐方式
  • flex-start | flex-end | center | baseline | stretch
    1. overflow-x 内容超过边框处理方式
      • visible 显示超出的内容
      • hidden 隐藏超出的内容
      • auto 自动加入滚动条

总结


今天我们讲解了页面的所有内容,知识点很多,尤其是wxss的样式,其实wxss样式和css样式的属性是差不多的,所以可以多去参考css样式属性,今天就说这么多,两篇的小程序入门文章,应该可以帮助大家跨进小程序的大门啦,接下来,我们将进入实战篇《电商》,很多朋友都问怎么做一个电商小程序,所以我将在后面的文章中,一步步教大家开发一个电商小程序,敬请期待!原创不易,觉得不错就点个赞吧!


1.如果本文帮到了您,不妨点一下右下角的 分享到 按钮。
2.除非注明,本博文章均为原创,转载请以链接形式标明本文地址。
3.本博文章只代表博主当时的观点或结论,与博主公司没有任何关系。