使用微信小程序开发制作一个简易的菜谱分享应用

最新推荐文章于 2024-09-19 12:11:41 发布

大黄鸭duck.

最新推荐文章于 2024-09-19 12:11:41 发布

阅读量247

点赞数 10

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/qq_67153941/article/details/138361405

版权

微信小程序是一种可以用来开发手机应用的框架，它可以在微信内直接运行，无需用户额外下载安装。下面我将为你详细介绍如何使用微信小程序开发制作一个简易的菜谱分享应用。

准备工作

首先，你需要安装微信开发者工具，该工具可以帮助你进行小程序的开发和调试。你可以在微信官方网站上下载并安装该工具。

创建新项目

打开微信开发者工具，点击新建项目，填写项目名称和项目目录，选择小程序项目，并勾选使用云开发能力。点击确定后，会自动生成项目文件和文件夹结构。

配置云开发环境

点击项目根目录下的 app.json 文件，在其中添加以下配置：

{
  "cloud": true,
  "miniprogramRoot": "./",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "newFeature": true
  },
  "appid": "你的小程序 appid",
  "projectname": "你的小程序名称"
}

然后，点击微信开发者工具界面的云开发按钮，按照提示登录并创建新的云开发环境。

创建数据库集合

在云开发控制台中，点击数据库，然后点击创建集合，输入集合名称为recipes，点击确定。

编写前端界面

在微信开发者工具的项目文件中，找到 pages 目录下的 index 文件夹，该文件夹中包含了小程序的入口页面。打开 index.js 文件，编写页面的逻辑代码：

const db = wx.cloud.database()

Page({
  data: {
    recipes: []
  },

  onLoad: function () {
    this.getRecipes()
  },

  getRecipes: function () {
    db.collection('recipes').get().then(res => {
      this.setData({
        recipes: res.data
      })
    })
  }
})

打开 index.wxml 文件，编写页面的结构代码：

<view class="container">
  <view wx:for="{{recipes}}" wx:key="index">
    <image src="{{item.image}}" class="image"></image>
    <view class="title">{{item.title}}</view>
    <view class="time">{{item.time}}</view>
    <view class="desc">{{item.desc}}</view>
  </view>
</view>

打开 index.wxss 文件，编写页面的样式代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.image {
  width: 200rpx;
  height: 200rpx;
}

.title {
  margin-top: 10rpx;
  font-size: 28rpx;
}

.time {
  margin-top: 4rpx;
  font-size: 24rpx;
  color: #888;
}

.desc {
  margin-top: 4rpx;
  font-size: 24rpx;
  color: #666;
}