微信小程序CMS系统开发教程开发初级

学习了大神分享的微信小程序开发教程，自己也过了一遍，也在此下笔记记录，留下自己的学习成果。

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 = thiswx.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

微信小程序CMS系统开发教程开发初级相关推荐

视频教程-雪狐CentOS7云服务器部署微信小程序商城系统(宝塔面板)-微信开发
雪狐CentOS7云服务器部署微信小程序商城系统(宝塔面板) 1.多年开发和授课经验. 2.精通PHP.前端.Android.iOS等开发技术. 3.希望能将自己所学教给学生. 刘安良 ¥12.00 ...
PHP开发B2C商城微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
【微信小程序】基于Java+uniapp框架开发的全开源微信小程序商城系统
应用介绍基于Java+uniapp框架开发的全开源微信小程序商城系统,前端采用目前主流的uniapp框架开发,后端采用Java语言开发,前后端代码全部开源,减少重复造轮子,支持小程序商城秒杀.优惠券 ...
微信小程序订餐系统需要服务器吗,微信小程序订餐系统怎么开发怎么创建微信外卖小程序...
原标题:微信小程序订餐系统怎么开发怎么创建微信外卖小程序过硬(10guoying.com)6月4日观察:网上订餐的新消费方式如今在我们日常生活中已经十分常见,人们不仅可以在饿了么.美团等的外卖平 ...
微信小程序：全新独家云开发微群人脉
今天给大家带来一款云开发版本的微群人脉小程序源码该版本属于采集版本(群二维码自动采集) 该版本属于云开发版本(免服务器和域名) 这是一款不怕封小程序版本 PS:支持用户自主发布那一款还是有点危险因为 ...
毕业季基于spring的基于安卓APP的基于ssm框架的基于微信小程序的管理系统设计与开发（开题+源码+讲解+论文）
毕业设计考察的是同学的专业知识的运用能力,除了对技能的考核,还看重你的创新思维,这里面设计到内容繁琐复杂. 对于还未毕业没有过项目开发经验的同学是有些难度的,一个程序的开发小到1两个月,大至几个月甚至 ...
微信小程序、APP分销商城开发：分销功能模块设计
前面我们讲了微信小程序商城基础营销功能:微信小程序商城.APP商城开发营销活动功能策划(拼团.砍价.秒杀.直播.优惠券等) 今天讲的分销系统更是强大的营销功能,它应该如何设计呢?我们的系统经过一点一点 ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
小程序开发语言python_微信小程序是用什么语言开发的呢
原标题:微信小程序是用什么语言开发的呢说到微信小程序可能大部分只是一知半解,您是否清楚小程序是用什么来开发的?如果您不太清楚,那么多美源小程序小编来告诉您小程序开的具体. 微信小程序是什么语言开发的 ...

微信小程序CMS系统开发教程开发初级

微信小程序CMS系统开发教程开发初级相关推荐

最新文章

热门文章