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

最新推荐文章于 2025-03-11 12:38:40 发布

斯蒂芬挥

最新推荐文章于 2025-03-11 12:38:40 发布

阅读量1w

点赞数 3

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/aineko520/article/details/79159903

版权

本文记录了一次微信小程序CMS系统的开发过程，包括小程序页面布局、数据获取、页面跳转以及后台PHP代码的编写。从创建Lists和Detail页面，到wx.request请求数据，解析并显示文章列表和详情。最后，通过weicms搭建后台，实现数据接口的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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