信息管理实践第十五周周记

实验内容

对小程序的内容进行了初步的学习，掌握了小程序的基本构成，会初步做简单的微信小程序了。

知识点

小程序文件包括四个子文件：JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色；网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色；WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改；一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等，在小程序里边，就通过编写 JS 脚本文件来处理用户的操作。

代码

我们组从网上找模板做了一个小程序，在这里把一个子页面的部分代码展示出来。

.json代码示例

{
  "pages": [
    "pages/CircleFriends/CircleFriends",
    "pages/login/login"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

.wxss代码示例

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

.js代码示例

Page({
  data: {
    data:['demo']
  },
  TouchItem: function(e){
    wx.navigateTo({
      url: '../CircleFriends/CircleFriends',
    })
  },
  onLoad: function (options) {
  },
  onReady: function () {
  },
  onShow: function () {
  },
  onHide: function () {
  },
  onUnload: function () {
  },
  onPullDownRefresh: function () {
  },
  onReachBottom: function () {
  },
  onShareAppMessage: function () {
  }
})

.wxml代码示例

<view class='page' wx:for='{{data}}' bindtap='TouchItem'>
  <label>{{item}}</label>
</view>

周记篇到此结束了。