1. 前端代码开发:使用微信小程序开发者工具或其他工具,开发出前端的界面、功能、逻辑代码等。
2. 后端接口开发:后端负责提供API接口,承担数据处理和逻辑控制等任务。采用RESTful API 或GraphQL API 形式提供前端需要的数据接口。
3. 前后端接口对接:在前端代码中,需要对后端提供的接口进行调用,获取数据进行展示,完成前后端交互。
4. 服务端部署:将后端代码部署到服务器上,在服务器上运行后端代码,使得前端发起请求后能够得到正确的数据返回。
5. 网络安全和数据安全:在前端和后端的实现过程中,需要注意网络安全和数据安全的问题,保证通信过程中的安全以及数据的保密性和完整性。
以上是微信小程序前后端分离实现的一些关键步骤,需要注意的是,该过程需要前端和后端开发人橡模汪员进行密切协作,并进行适当的测试和调整,以保证整体的实现效果和性能。
讲解下循环输出元素这里写图片描述
这里写图片描述
后台存储的数据给事
{
var local_database = [
{
date: "Sep 18 2016",
post_title:"冬日校花",
post_image: "/images/1.jpg",
text: "美呀,美呀",
view_num: 112,
collect_num: 96,
turn_num: 515,
author_img: "/images/6.jpg",
author:"高晴",
dateTime:"24小时",
detail:"我爱你,爱的如此深沉",
postId:0,
music:{
url: '?down/46993.mp3',
title: "雪の华-南条爱乃",
coverImg: "/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"
},
},
{
date: "Sep 18 2016",
post_title: "冬日校花",
post_image: "/images/2.jpg",
text: "美呀,美呀",
view_num: 112,
collect_num: 96,
turn_num: 515,
author_img: "/images/6.jpg",
author: "高晴",
dateTime: "24小时",
detail: "我爱你,爱的如此深沉",
postId: 1,
music: {
url: '/yq/5092537.mp3',
title: "爱你-陈芳语",
coverImg: "/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"
},
},
{
date: "Sep 18 2016",
post_title: "冬日校花",
post_image: "/images/3.jpg",
text: "美呀,美呀",
view_num: 112,
collect_num: 96,
turn_num: 515,
author_img: "/images/6.jpg",
author: "高晴",
dateTime: "24小时"羡携枣,
detail: "我爱你,爱的如此深沉",
postId: 2,
music: {
url: '/yq/204586755.mp3',
title: "云烟成雨-房东的猫",
coverImg: "兄拆music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"
},
},
{
date: "Sep 18 2016",
post_title: "冬日校花",
post_image: "/images/4.jpg",
text: "美呀,美呀",
view_num: 112,
collect_num: 96,
turn_num: 515,
author_img: "/images/6.jpg",
author: "高晴",
dateTime: "24小时",
detail: "我爱你,爱的如此深沉",
postId: 3,
music: {
url: '/yq/213919334.mp3',
title: "Your Song-Lady Gaga",
coverImg: "https://www.ztsjedu.com/#music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"
},
},
]
module.exports={
postList:local_database,
}
}
前台使用for循环输出
这里写图片描述
这里写图片描述:
然后我们自己尝试构建一个for循环输出的小程序
app.js以及app.json app.wxss页面的构造就不放出来了,不会的童鞋可以看博主的第一个小程序文章
初步构造完成如下:
这里写图片描述
下面是for.js的构造:
// pages/for/for.js
Page({
/**
* 页面隐迟的初始数据
*/
data: {
data:[
{
name:"张三"
},
{
name:"李四"
},{
name:"王五"
}
],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
})
for.wxml
<block wx:for="{{data}}" data-item="item" wx:for-index="idx" >
<view>
第{{idx}}次输出,姓名:{{item.name}}
</view>
</block>
讲解:
这里的for.js中,data是默认存在的函数,负责保存数据,前台的wxml文件只能调用data中的存在的数据
具体的调用方法为双大括号加上数据名
for.wxml中
需要循环输出,需要将for元素放入block中 ,并填入需要循环输出的数据:这里是data(注:这里的data是js中data中data,大家注意区分下,博主忘了区分)
然后data-item 是给data中的子元素添加一个调用的key名,类似于php的foreach,index则是调用的当前元素在数组中的数字下标,大家可以看到输出结果是从零开始的
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)