微信小程序开发系列——5.前端页面开发

数据绑定在小程序中是最简单的使用数据方式，用双大括号将变量包起来，如果组件有属性则需将数据放置于引号之外。在这个text中，当前变量是写在两个标志之间的。

<text class="userinfo-nickname">{{userInfo.nickName}}text>

2、bindtap函数
在当前例子中我们可以发现一个属性叫做 bindtap 的东西，仔细看第二行：

  "bindViewTap" class="userinfo">  

这个东西就是刚才在图1中的展示的六边形代表的意思——事件触发函数。啥？你问我什么是“事件”？如果用前端的说法，就是绑定在视图上的一个组件，用户操作这个组件就可以将前台的行为返回到逻辑层(js文件)进行处理。

以这份代码为例，当你点击这个组件时，在index.js中，就有一个bindViewTap()函数就已经触发并执行相应的功能。当这个view组件被按下时，框架会触发一个event事件，并将该事件通过参数传到bindViewTap(event)函数中执行。可以在index.js中打印一下这个event含有的参数：

//index.js
Page({ 
 bindViewTap: function(event) { 
 console.log(event) 
 } 
}) 

点击这个view组件，可以看到打印出来的log如下：

{ 
"type": "tap", 
"timeStamp": 1252, 
"target": { 
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset": { 
 "hi": "MINA"
 } 
}, 
"currentTarget": { 
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset": { 
 "hi": "MINA"
 } 
}, 
"touches": [{ 
 "pageX": 30, 
 "pageY": 12, 
 "clientX": 30, 
 "clientY": 12, 
 "screenX": 112, 
 "screenY": 151 
}], 
"detail": { 
 "x": 30, 
 "y": 12 
} 
} 

当逻辑层函数需要获取相关视图的信息时， 可以从参数event中获取。
例如，构造一个组件：

//index.wxml
"inputchar"/>

然后再在index.js文件中编写inputchar(event)函数：

//index.js
inputchar: function(event){
    var str = e.detail.value;//获取当前控件的value,在input组件中就是输入的字符串
    console.log(str);
}

我们在input栏中输入字符时，就可以监听到输入值的变化情况，每输入一个字符时，inputchar函数都被触发了一遍，并在控制台打印出输入的字符串。

2.2 index.js

​ index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

每个页面都需要注册，index.js用Page()这个函数来注册一个页面，它接受一个object参数，用这个参数来指定页面的初始数据，生命周期函数，事件处理函数。

2.3 wxss

index.wxss 是页面的样式表：

/**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;
}

页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。其中样式表绝大多数的写法与css是一模一样的。

2.4 index.json

index.json是页面的配置文件，这个配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

​

3. 页面展示

运行结果如下：

手机预览（只有获得AppId的才有权限预览）

以上是微信小程序前端开发的基本流程，而实际上要做一个内容可以更新的小程序，单有前端开发是远远不够的，还需要后台开发。后台开发与web开发的后台基本无异，可以选择用java、php、nodejs等任一语言，有一点需要注意的是小程序后台服务器必须是https协议的，这就要求必须购买云服务器，申请SSL证书，并将后台服务器设置成https服务。而做这些的前提是要先购买好服务器、数据库和域名。以上的资源配置统统可以到腾讯云主页去购买。关于后台服务器的配置，可以参考开发者工具以及开发框架简介。

如果在开发时还有困难，还可以参考W3Cschool的文档内容，我在开发现在的这个软件时，基本都是参考这里的文档的，虽然是照搬官网的内容，但是整理得非常详细，逻辑清晰实用。