实验内容
对小程序的内容进行了初步的学习,掌握了小程序的基本构成,会初步做简单的微信小程序了。
知识点
小程序文件包括四个子文件: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>
周记篇到此结束了。