You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
279 lines
8.1 KiB
279 lines
8.1 KiB
/**
|
|
* 快速开始教程知识点
|
|
*/
|
|
const QuickStartPoints = [
|
|
{ id: '1', title: '无需搭建服务器，快速构建小程序' },
|
|
{ id: '2', title: '免登录、免鉴权调用微信开放服务' },
|
|
];
|
|
|
|
function highlightText(content) {
|
|
return `<span> \`${content}\` </span>`;
|
|
}
|
|
|
|
/**
|
|
* 快速开始教程步骤
|
|
*/
|
|
const QuickStartSteps = [
|
|
{
|
|
id: '1',
|
|
title: '创建列表页面并初始化数据',
|
|
contents: [
|
|
{
|
|
type: 'text',
|
|
content: `编辑教程内置的页面${highlightText('miniprogram/pages/goods-list/index.js')}，在${highlightText('Page')}的${highlightText('data')}配置项中添加初始化数据${highlightText('goodsList')}，代码如下所示。该页面将用于展示商品列表。`,
|
|
},
|
|
{
|
|
type: 'code',
|
|
content: `
|
|
Page({
|
|
data: {
|
|
goodsList: [{
|
|
_id: '1',
|
|
title: '商品1',
|
|
price: 1,
|
|
}],
|
|
},
|
|
})
|
|
`,
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: '保存文件，查看页面，可以看到列表渲染出初始数据。',
|
|
},
|
|
{
|
|
type: 'image',
|
|
content: 'list-init.png',
|
|
}
|
|
],
|
|
showJumpButton: true,
|
|
},
|
|
{
|
|
id: '2',
|
|
title: '实现并部署一个后台接口',
|
|
contents: [
|
|
{
|
|
type: 'text',
|
|
content: `编辑教程内置的后台接口文件${highlightText('cloudfunctions/quickstartFunctions/fetchGoodsList/index.js')}，使用下面代码覆盖文件内容，返回一些模拟的商品列表数据。`,
|
|
},
|
|
{
|
|
type: 'code',
|
|
content: `
|
|
const cloud = require('wx-server-sdk');
|
|
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
|
|
exports.main = async (event, context) => {
|
|
return {
|
|
dataList: [
|
|
{ _id: '1', title: '微信气泡徽章', price: 1800 },
|
|
{ _id: '2', title: '微信地球鼠标垫', price: 5800 },
|
|
{ _id: '3', title: '微信黄脸大贴纸', price: 500 }
|
|
],
|
|
}
|
|
};
|
|
`
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: `保存文件后，在${highlightText('cloudfunctions/quickstartFunctions')}目录右键，选择【上传并部署-云端安装依赖】，等待进度完成，即完成后端接口的开发与部署。`,
|
|
},
|
|
{
|
|
type: 'image',
|
|
content: 'function_deploy.png',
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: `注：新用户部署时会提示创建云开发环境。<span style="color: red;">新用户可免费开通云开发环境并试用。</span>`,
|
|
},
|
|
{
|
|
type: 'image',
|
|
content: 'create_env.png',
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: `新用户开通环境后在${highlightText('cloudfunctions')}目录右键，选择当前环境为新建的环境。`,
|
|
},
|
|
{
|
|
type: 'image',
|
|
content: 'env-select.png',
|
|
},
|
|
],
|
|
showJumpButton: false,
|
|
},
|
|
{
|
|
id: '3',
|
|
title: '小程序端调用后台接口',
|
|
contents: [
|
|
{
|
|
type: 'text',
|
|
content: `编辑列表页${highlightText('miniprogram/pages/goods-list/index.js')}，在 Page 下新增一个方法${highlightText('fetchGoodsList')}，用于调用后端接口，并在 Page 的${highlightText('onLoad')}生命周期调用该方法：`,
|
|
},
|
|
{
|
|
type: 'code',
|
|
content: `
|
|
async fetchGoodsList() {
|
|
this.setData({ isLoading: true });
|
|
const res = await wx.cloud.callFunction({
|
|
name: 'quickstartFunctions',
|
|
data: { type: 'fetchGoodsList' },
|
|
});
|
|
const goodsList = res?.result?.dataList || [];
|
|
this.setData({
|
|
isLoading: false,
|
|
goodsList
|
|
});
|
|
},
|
|
`
|
|
},
|
|
{
|
|
type: 'code',
|
|
content: `
|
|
onLoad() {
|
|
this.fetchGoodsList();
|
|
},
|
|
`,
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: `保存文件后，查看列表页，可以看到调用后台接口获取到了模拟数据并正确显示。`,
|
|
},
|
|
{
|
|
type: 'image',
|
|
content: 'list-scf.png',
|
|
}
|
|
],
|
|
showJumpButton: true,
|
|
},
|
|
{
|
|
id: '4',
|
|
title: '从数据库中读取真实数据',
|
|
contents: [
|
|
{
|
|
type: 'text',
|
|
content: '前面步骤中，后台接口返回的是模拟数据，实际开发中，我们需要利用数据库实现持久存储，下面我们来通过云开发数据库能力实现这个效果。',
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: `点击开发者工具顶部的【云开发】按钮，打开云开发控制台，选中【数据库】，新增一个商品集合命名${highlightText('goods')}，并添加若干条记录。注：本示例中，集合中的记录请保证具有${highlightText('title')}和${highlightText('price')}字段。`,
|
|
},
|
|
{
|
|
type: 'image',
|
|
content: 'scf-enter.png',
|
|
},
|
|
{
|
|
type: 'image',
|
|
content: 'database_add.png',
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: `编辑后台接口代码${highlightText('cloudfunctions/quickstartFunctions/fetchGoodsList/index.js')}，用下面代码覆盖文件内容，用于读取数据库中数据：`,
|
|
},
|
|
{
|
|
type: 'code',
|
|
content: `
|
|
const cloud = require('wx-server-sdk');
|
|
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
|
|
|
|
const db = cloud.database();
|
|
|
|
exports.main = async (event, context) => {
|
|
const result = await db.collection('goods')
|
|
.skip(0)
|
|
.limit(10)
|
|
.get();
|
|
return {
|
|
dataList: result?.data,
|
|
};
|
|
};
|
|
`,
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: `保存文件后，在${highlightText('cloudfunctions/quickstartFunctions')}目录右键，选择【上传并部署-云端安装依赖】，重新部署后台接口。`,
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: '查看页面，可以看到正确获取数据库中的数据并显示在列表中。',
|
|
},
|
|
{
|
|
type: 'image',
|
|
content: 'list-database.png',
|
|
}
|
|
],
|
|
showJumpButton: true,
|
|
},
|
|
{
|
|
id: '5',
|
|
title: '调用开放接口生成小程序码',
|
|
contents: [
|
|
{
|
|
type: 'text',
|
|
content: '实际小程序开发中，我们通常会对小程序进行传播分享。下面我们利用免鉴权的云调用能力实现小程序码。',
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: `编辑教程内置的接口文件${highlightText('cloudfunctions/quickstartFunctions/genMpQrcode/index.js')}，用以下代码覆盖文件内容。该接口用于生成小程序码图片并上传到云存储保存。`,
|
|
},
|
|
{
|
|
type: 'code',
|
|
content: `
|
|
const cloud = require('wx-server-sdk');
|
|
|
|
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
|
|
|
|
exports.main = async (event, context) => {
|
|
const pagePath = event.pagePath;
|
|
// 获取小程序二维码的buffer
|
|
const resp = await cloud.openapi.wxacode.get({
|
|
path: pagePath,
|
|
});
|
|
const { buffer } = resp;
|
|
// 将图片上传云存储空间
|
|
const upload = await cloud.uploadFile({
|
|
cloudPath: String(pagePath).replaceAll('/', '_') + '.png',
|
|
fileContent: buffer
|
|
});
|
|
return upload.fileID;
|
|
};
|
|
`,
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: `保存文件后，在${highlightText('cloudfunctions/quickstartFunctions')}目录右键，选择【上传并部署-云端安装依赖】，部署该接口。`,
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: `编辑商品列表页${highlightText('miniprogram/pages/goods-list/index.js')}，在 Page 配置中新增一个方法${highlightText('generateMPCode')}，用于调用接口获取小程序码：`,
|
|
},
|
|
{
|
|
type: 'code',
|
|
content: `
|
|
async generateMPCode() {
|
|
wx.showLoading();
|
|
const resp = await wx.cloud.callFunction({
|
|
name: 'quickstartFunctions',
|
|
data: {
|
|
type: 'genMpQrcode',
|
|
pagePath: 'pages/goods-list/index',
|
|
}
|
|
});
|
|
this.setData({ codeModalVisible: true, codeImageSrc: resp?.result });
|
|
wx.hideLoading();
|
|
},
|
|
`
|
|
},
|
|
{
|
|
type: 'text',
|
|
content: `保存文件后，在商品列表页点击【分享】按钮，会调用${highlightText('generateMPCode')}方法获取小程序码并弹框显示。`,
|
|
},
|
|
{
|
|
type: 'image',
|
|
content: 'list-share.png',
|
|
}
|
|
],
|
|
showJumpButton: true,
|
|
},
|
|
];
|
|
|
|
module.exports = {
|
|
QuickStartPoints,
|
|
QuickStartSteps,
|
|
} |