当前位置：首页 > news >正文

【微信小程序开发】从0开始的一点点小记录

news 2025/5/9 8:30:20

环境篇

微信小程序开发的环境比较简单，下载微信开发者工具即可。
https://developers.weixin.qq.com/platform/?utm_source=gateway_homepage

快速开始

想要快速开始的话，使用 TDesign 提供的模版比较好。TDesign 是一个微信小程序的组件库。使用 TDesign 提供好的模版然后去改成我们想要的样子，我认为是比从0开始要更快的。
https://tdesign.tencent.com/miniprogram/getting-started

在这里插入图片描述

架构介绍

https://developers.weixin.qq.com/miniprogram/dev/reference/

各部分的详细介绍大家看文档即可，这里简单介绍一下各部分功能：

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。
pages 用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。
window 用于设置小程序的状态栏、导航条、标题、窗口背景色。
tabBar 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
subpackages 启用分包加载时，声明项目分包结构。
…

页面介绍

使用 TDesign 开发的话，页面包含以下四个文件
在这里插入图片描述

wxml : 页面
js：页面逻辑
less：样式
json：声明使用哪些组件

云开发

使用云开发可以快速构建项目，就不需要我们再写后端了。通过如下方式，图形化的构建数据库即可。

在这里插入图片描述
步骤一：在 app.js 中填入环境 id

// app.js
App({onLaunch() {const updateManager = wx.getUpdateManager();updateManager.onCheckForUpdate((res) => {// console.log(res.hasUpdate)});updateManager.onUpdateReady(() => {wx.showModal({title: '更新提示',content: '新版本已经准备好，是否重启应用？',success(res) {if (res.confirm) {updateManager.applyUpdate();}},});});if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({// env 参数说明：//   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源//   此处请填入环境 ID, 环境 ID 可打开云控制台查看//   如不填则使用默认环境（第一个创建的环境）env: '-----------此处填写环境id-------------',traceUser: true,})}},globalData: {userInfo: null,}
});

步骤二：在代码中使用操作数据库

// 1. 获取数据库引用
const db = wx.cloud.database()
// 2. 构造查询语句
// collection 方法获取一个集合的引用
// where 方法传入一个对象，数据库返回集合中字段等于指定值的 JSON 文档。API 也支持高级的查询条件（比如大于、小于、in 等），具体见文档查看支持列表
// get 方法会触发网络请求，往数据库取数据
db.collection('books').where({publishInfo: {country: 'United States'}
}).get({success: function(res) {// 输出 [{ "title": "The Catcher in the Rye", ... }]console.log(res)}
})