起风网版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
学习了大神分享的微信小程序开发教程，自己也过了一遍，也在此下笔记记录，留下自己的学习成果。
l 首先搭建好小程序的布局。
解析：
1、Images文件夹存放图片。
2、Detail文件夹是系统文章的详细页面。
3、Lists文件夹是系统文章列表的页面。
4、其他的是标准的模板内容。
l App.json文件中添加加载页面的配置
{
"pages":[
"pages/lists/lists",
"pages/detail/detail",
"pages/index/index",
"pages/logs/logs"
],
l 首先，先添加文章列表lists的界面。
l Lists.wxml代码如下：
<!--index.wxml-->
<viewclass="warp">
<templatename="items">
<navigatorurl='../../pages/detail/detail?id={{id}}'hover-class='navigator-hover'>
<viewclass='imgs'><imagesrc='{{img}}'class='in-img'background-size="cover"model="scaleToFill"></image></view>
<viewclass='infos'>
<viewclass='title'>{{title}}</view>
<viewclass='date'>{{cTime}}</view>
</view>
</navigator>
</template>
<blockwx:for="{{newList}}"wx:key="newList"class="list">
<templateis="items"data="{{...item}}"/>
</block>
</view>
l 解析：
1、<template>下的内容是模板，模板设定后使用<templateis=“items”>调用，引用的是<template>下设定下的内容。
2、<navigator>标签设定跳转的url。
3、使用wx:for要在<block>下使用，还要必须带wx:key，不会影响运行，但是后台会打印提醒。
3、{{cTime}}、{{title}}、{{id}}、{{img}}、{{newList}}等标签，动态获取来自lists.js定义的数据。
l lists.js代码如下：
Page({
data: {
newList:[
{ id: 1, title: "aaaaaaaa", img: "../../images/1.png", cTime:"2018-01-2316:00"},
{ id: 2, title: "bbbbbbbb", img: "../../images/2.png", cTime: "2018-01-2316:00" },
{ id: 3, title: "cccccccc", img: "../../images/3.png", cTime: "2018-01-2316:00" },
{ id: 4, title: "ddddddddd", img: "../../images/4.png", cTime: "2018-01-2316:00" },
]
},
onLoad: function (options) {
var that = this//首先定义that值
wx.request({
url: 'http://localhost:8080/index.php?s=/addon/Cms/Cms/getList', data: {},
header: {
'content-type': 'application/json'// 默认值
},
success: function (res) {
console.log(res.data)
that.setData({
newList: res.data
})
}
}
)
},
})
l 解析：
1、 Data{}下面定义的是数据来源，newList:[]下面定义的是数组。
2、 onLoad: function(options) {}是页面加载时触发的事件，options是需要输入的参数。
3、 wx.request是接收其他系统的代码块，url定义接收的链接，接收内容要求是ajson格式。
4、 success: function (res){}调用成功后数据处理的方法。that.setData是设置当前newList[]数组的数据为res.data。
l lists.wxss代码如下：
.warp{
height:100%;
display:flex;
flex-direction:column;
padding:20rpx;
}
navigator { overflow:hidden;}
.list {margin-bottom:20rpx;height:200rpx;position:relative;}
.imgs {float:left;}
.imgsimage {display:block; width:200rpx;height:200rpx;}
.infos {float:left; width:480rpx; height:200rpx;padding:20rpx0020rpx;}
.title {font-size:20px;}
.date {font-size:16px;color:blueviolet; position:absolute;}
.loadMore {text-align:center;margin:30px;color:#aaa;font-size:16px}
注：暂不做解析。
l lists.json无特殊要求不需编写，自动加载app.json内容：
l 该页面编写完后的结果如下：
l 首先，先添加文章内容详情detail的界面。
l detail.wxml代码如下：
<viewclass='warp'>
<viewclass='title'> {{info.title}}</view>
<view class='cTime'> {{info.cTime}}</view>
<view class='img'><imagesrc='{{info.img}}'class='in-img'background-size="cover"model="scaleToFill"></image></view>
<viewclass='content'>{{info.content}}</view>
</view>
具体解析与lists.xml差不多，只是布局不一样。
l detail.js代码如下：
Page({
data: {
info: {
id: 1, title: "aaaaaaaa", img: "../../images/1.png", cTime: "2018-01-2316:00", content: "每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。" }
},
onLoad: function (options) {
var that = this
wx.request({
url: 'http://localhost:8080/index.php?s=/addon/Cms/Cms/getDetail', //仅为示例，并非真实的接口地址
data: { id: options.id},
header: {
'content-type': 'application/json'// 默认值
},
success: function (res) {
console.log(res.data)
that.setData({
info: res.data
})
}
}
)
},
})
具体解析也与lists.js差不多，需要注意的是wx.request({})下data: { id: options.id},定义了数据di下面的数据为options.id，等到that.setData({info:
res.data})获取的是url指定的ID。
l detail.wxss代码如下：
.warp {
height:100%;
display:flex;
flex-direction:column;
padding:20rpx;
font-size:16px;
}
.title {
text-align:center;
padding:20rpx;
font-size:20px;
}
.cTime {
color:#aaa;
}
.img {
text-align:center;
padding:20rpx;
}
.imgimage {
width:120px;
height:120px;
}
.content {
text-indent:2em;
}
.close {
text-align:center;
margin:30px;
font-size:20px;
color:#aaa
}
注：暂不做解析。
l detail.json无特殊要求不需编写，自动加载app.json内容：
l 该页面编写完后的结果如下：
l 前台页面做完了，剩下需要搭建后台，此教程后台搭建是使用weicms代码来搭建，需要一定的PHP部署基础，在网上下载weicms.zip，解压后部署在wamp上，在本地安装。
l 安装后找出代码，具体位置在\wamp\www\Addons\Cms\Controller\CmsController.class.php。
在CmsController.class.php上面编写代码如下：
.warp {
height:100%;
display:flex;
flex-direction:column;
padding:20rpx;
font-size:16px;
}
.title {
text-align:center;
padding:20rpx;
font-size:20px;
}
.cTime {
color:#aaa;
}
.img {
text-align:center;
padding:20rpx;
}
.imgimage {
width:120px;
height:120px;
}
.content {
text-indent:2em;
}
.close {
text-align:center;
margin:30px;
font-size:20px;
color:#aaa
}编写后使用以下url测试是否成功，
http://localhost:8080/index.php?s=/addon/Cms/Cms/getDetail/id/1
http://localhost:8080/index.php?s=/addon/Cms/Cms/getList
输出的是JSON格式的数据，则为成功。
总结，小程序前段加后端具体如上，本人成功编写成功，这次只做记录，写到比较简陋，愿意提供原创视频教程和代码给大家使用。
链接：https://pan.baidu.com/s/1dzQfGM 密码：bzvf
评论前必须登录！
立即登录