devbox
小惠珠哦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序实例代码解读_微信小程序 产品列表代码

作者：小惠珠哦 | 2024-08-23 06:29:16

赞

踩

微信小程序 产品列表代码

以微信 小程序开发工具给的示例代码为例：

主页代码：

index.wxml

这个文件是一个微信小程序页面的 WXML 结构,主要功能是展示一个快速开始教程的步骤和内容。

源代码：

  1. <!--index.wxml-->
  2. <view class="container">
  3.   <view class="main">
  4.     <view class="title font_title_1">快速开始</view>
  5.     <view class="sub_title">
  6.       欢迎使用云开发！本页将带你了解如何使用云开发提供的能力快速开发小程序。
  7.     </view>
  8.     <view class="ability_container">
  9.       <view class="ability_title">你将学习到</view>
  10.       <view class="ability_item" wx:for="{{ knowledgePoints }}" wx:for-item="point" wx:key="id">
  11.         {{ point.title }}
  12.       </view>
  13.     </view>
  14.  
  15.     <view class="title font_title_2">5分钟上手教程</view>
  16.     <view class="sub_title">
  17.       我们将会使用常用的云开发能力，快速实现一个简单的商品列表页面。无需购买服务器，即可快速开发出后台服务、读取数据库、存取文件、调用微信开放服务。页面最终效果如下图所示。
  18.     </view>
  19.     <view class="image_container">
  20.       <image src="../../images/list-database.png" mode="widthFix" />
  21.     </view>
  22.  
  23.     <view class="btn-view-demo-page with-margin" bind:tap="gotoGoodsListPage">查看页面</view>
  24.  
  25.     <view class="seperator" />
  26.     <view class="step_container" wx:for="{{ steps }}" wx:key="id" wx:for-item="step">
  27.       <view id="step_{{ step.id }}" data-step="{{ step.id }}" class="step_title">
  28.         <view class="step_id_container">
  29.           <view class="step_id_mark">NO.</view>
  30.           <view class="step_id_content">0{{ step.id }}</view>
  31.         </view>
  32.         <view class="font_title_2">{{ step.title }}</view>
  33.       </view>
  34.       <view class="step_content">
  35.         <block wx:for="{{ step.contents }}" wx:for-item="item" wx:key="index">
  36.           <view wx:if="{{ item.type === 'text' }}" class="text_zone">
  37.             <rich-text nodes="<p style='line-height: 26px;'>{{ item.content }}</p>" />
  38.           </view>
  39.           <view wx:if="{{ item.type === 'code' }}" class="code_zone">
  40.             <image class="btn-copy" data-code="{{ item.content }}" bind:tap="copyCode" src="../../images/icons/copy.png" />
  41.             <rich-text nodes="<pre style='overflow: scroll;'>{{ item.content }}</pre>" />
  42.           </view>
  43.           <view wx:if="{{ item.type === 'image' }}" class="image_zone">
  44.             <image src="../../images/{{ item.content }}" mode="widthFix" />
  45.           </view>
  46.         </block>
  47.       </view>
  48.       <view wx:if="{{ step.showJumpButton }}" class="btn-view-demo-page" bind:tap="gotoGoodsListPage">查看页面</view>
  49.       <view class="seperator" />
  50.     </view>
  51.  
  52.     <view class="bottom-tip">
  53.       至此，我们完成了一个带分享功能的小程序，利用了云开发的云函数、云数据库、云存储等能力，无需服务器即可快速完成较为复杂的功能。
  54.     </view>
  55.     <view  class="bottom-tip">此外，云开发还提供了云模板、云后台、云托管等更多高级能力，可点击下方按钮前往查看。</view>
  56.     <view class="button" bind:tap="discoverCloud">探索云开发更多功能</view>
  57.   </view>
  58. </view>

1、<view class="container">创建一个容器视图，用于包裹整个页面内容。

2、<view class="main">：创建一个主要内容区域的视图。

3、<view class="title font_title_1">快速开始</view>一个只包含“快速开始”的视图

4、<view class="sub_title">

      欢迎使用云开发！本页将带你了解如何使用云开发提供的能力快速开发小程序。

    </view>

一个包含文本的视图

5、<view class="ability_container">   创建一个容器视图,用于展示知识点列表。

6、<view class="ability_title">你将学习到</view>   创建一个容器视图,用于展示知识点列表。

7、<view class="ability_item" wx:for="{{ knowledgePoints }}" wx:for-item="point" wx:key="id">   使用 wx:for 指令循环渲染知识点列表,每个知识点使用 ability_item 类样式。

8、{{ point.title }}标题类型

9、<view class="title font_title_2">5分钟上手教程</view>   创建一个容器视图,文本标题“5分钟上手教程”

10、<view class="sub_title">

      我们将会使用常用的云开发能力，快速实现一个简单的商品列表页面。无需购买服务器，即可快速开发出后台服务、读取数据库、存取文件、调用微信开放服务。页面最终效果如下图所示。

    </view>

文本容器视图，用于呈现文本

11、<view class="image_container">

      <image src="../../images/list-database.png" mode="widthFix" />

    </view>

容器视图，用于呈现图片

12、<view class="btn-view-demo-page with-margin" bind:tap="gotoGoodsListPage">查看页面</view>

容器视图，呈现按钮，链接到goodslist的page界面

13、<view class="step_container" wx:for="{{ steps }}" wx:key="id" wx:for-item="step">  容器视图，使用 wx:for 指令循环渲染步骤列表、展示步骤标题。

14、<view id="step_{{ step.id }}" data-step="{{ step.id }}" class="step_title">  容器视图，每个id对应不同步骤的区域

15、<view class="step_id_container">

          <view class="step_id_mark">NO.</view>

          <view class="step_id_content">0{{ step.id }}</view>

        </view>

每个区域的标题部分

16、<view class="font_title_2">{{ step.title }}</view>  容器视图，对应每部分的标题：

17、

  1.       <view class="step_content">
  2.         <block wx:for="{{ step.contents }}" wx:for-item="item" wx:key="index">
  3.           <view wx:if="{{ item.type === 'text' }}" class="text_zone">
  4.             <rich-text nodes="<p style='line-height: 26px;'>{{ item.content }}</p>" />
  5.           </view>
  6.           <view wx:if="{{ item.type === 'code' }}" class="code_zone">
  7.             <image class="btn-copy" data-code="{{ item.content }}" bind:tap="copyCode" src="../../images/icons/copy.png" />
  8.             <rich-text nodes="<pre style='overflow: scroll;'>{{ item.content }}</pre>" />
  9.           </view>
  10.           <view wx:if="{{ item.type === 'image' }}" class="image_zone">
  11.             <image src="../../images/{{ item.content }}" mode="widthFix" />
  12.           </view>
  13.         </block>
  14.       </view>

不同部分的代码部分，用于展示不同步骤的内容

18、<view wx:if="{{ step.showJumpButton }}" class="btn-view-demo-page" bind:tap="gotoGoodsListPage">查看页面</view>

      <view class="seperator" />

视图内容，按钮链接，对应最终的页面内容

19、<view class="bottom-tip">

      至此，我们完成了一个带分享功能的小程序，利用了云开发的云函数、云数据库、云存储等能力，无需服务器即可快速完成较为复杂的功能。

    </view>

    <view  class="bottom-tip">此外，云开发还提供了云模板、云后台、云托管等更多高级能力，可点击下方按钮前往查看。</view>

文本内容

20、<view class="button" bind:tap="discoverCloud">探索云开发更多功能</view>  链接对应其他页面

constants.js

  1. /**
  2.  * 快速开始教程知识点
  3.  */
  4. const QuickStartPoints = [
  5.   { id: '1', title: '无需搭建服务器，快速构建小程序' },
  6.   { id: '2', title: '免登录、免鉴权调用微信开放服务' },
  7. ];
  8.  
  9. function highlightText(content) {
  10.   return `<span> \`${content}\` </span>`;
  11. }
  12.  
  13. /**
  14.  * 快速开始教程步骤
  15.  */
  16. const QuickStartSteps = [
  17.   {
  18.     id: '1',
  19.     title: '创建列表页面并初始化数据',
  20.     contents: [
  21.       {
  22.         type: 'text',
  23.         content: `编辑教程内置的页面${highlightText('miniprogram/pages/goods-list/index.js')}，在${highlightText('Page')}的${highlightText('data')}配置项中添加初始化数据${highlightText('goodsList')}，代码如下所示。该页面将用于展示商品列表。`,
  24.       },
  25.       {
  26.         type: 'code',
  27.         content: `
  28. Page({
  29.   data: {
  30.     goodsList: [{
  31.       _id: '1',
  32.       title: '商品1',
  33.       price: 1,
  34.     }],
  35.   },
  36. })
  37.         `,
  38.       },
  39.       {
  40.         type: 'text',
  41.         content: '保存文件，查看页面，可以看到列表渲染出初始数据。',
  42.       },
  43.       {
  44.         type: 'image',
  45.         content: 'list-init.png',
  46.       }
  47.     ],
  48.     showJumpButton: true,
  49.   },
  50.   {
  51.     id: '2',
  52.     title: '实现并部署一个后台接口',
  53.     contents: [
  54.       {
  55.         type: 'text',
  56.         content: `编辑教程内置的后台接口文件${highlightText('cloudfunctions/quickstartFunctions/fetchGoodsList/index.js')}，使用下面代码覆盖文件内容，返回一些模拟的商品列表数据。`,
  57.       },
  58.       {
  59.         type: 'code',
  60.         content: `
  61. const cloud = require('wx-server-sdk');
  62. cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
  63. exports.main = async (event, context) => {
  64.   return {
  65.     dataList: [
  66.       { _id: '1', title: '微信气泡徽章', price: 1800 },
  67.       { _id: '2', title: '微信地球鼠标垫', price: 5800 },
  68.       { _id: '3', title: '微信黄脸大贴纸', price: 500 }
  69.     ],
  70.   }
  71. };
  72.         `
  73.       },
  74.       {
  75.         type: 'text',
  76.         content: `保存文件后，在${highlightText('cloudfunctions/quickstartFunctions')}目录右键，选择【上传并部署-云端安装依赖】，等待进度完成，即完成后端接口的开发与部署。`,
  77.       },
  78.       {
  79.         type: 'image',
  80.         content: 'function_deploy.png',
  81.       },
  82.       {
  83.         type: 'text',
  84.         content: `注：新用户部署时会提示创建云开发环境。<span style="color: red;">新用户可免费开通云开发环境并试用。</span>`,
  85.       },
  86.       {
  87.         type: 'image',
  88.         content: 'create_env.png',
  89.       },
  90.       {
  91.         type: 'text',
  92.         content: `新用户开通环境后在${highlightText('cloudfunctions')}目录右键，选择当前环境为新建的环境。`,
  93.       },
  94.       {
  95.         type: 'image',
  96.         content: 'env-select.png',
  97.       },
  98.     ],
  99.     showJumpButton: false,
  100.   },
  101.   {
  102.     id: '3',
  103.     title: '小程序端调用后台接口',
  104.     contents: [
  105.       {
  106.         type: 'text',
  107.         content: `编辑列表页${highlightText('miniprogram/pages/goods-list/index.js')}，在 Page 下新增一个方法${highlightText('fetchGoodsList')}，用于调用后端接口，并在 Page 的${highlightText('onLoad')}生命周期调用该方法：`,
  108.       },
  109.       {
  110.         type: 'code',
  111.         content: `
  112. async fetchGoodsList() {
  113.   this.setData({ isLoading: true });
  114.   const res = await wx.cloud.callFunction({
  115.     name: 'quickstartFunctions',
  116.     data: { type: 'fetchGoodsList' },
  117.   });
  118.   const goodsList = res?.result?.dataList || [];
  119.   this.setData({
  120.     isLoading: false,
  121.     goodsList
  122.   });
  123. },
  124.         `
  125.       },
  126.       {
  127.         type: 'code',
  128.         content: `
  129. onLoad() {
  130.   this.fetchGoodsList();
  131. },
  132.         `,
  133.       },
  134.       {
  135.         type: 'text',
  136.         content: `保存文件后，查看列表页，可以看到调用后台接口获取到了模拟数据并正确显示。`,
  137.       },
  138.       {
  139.         type: 'image',
  140.         content: 'list-scf.png',
  141.       }
  142.     ],
  143.     showJumpButton: true,
  144.   },
  145.   {
  146.     id: '4',
  147.     title: '从数据库中读取真实数据',
  148.     contents: [
  149.       {
  150.         type: 'text',
  151.         content: '前面步骤中，后台接口返回的是模拟数据，实际开发中，我们需要利用数据库实现持久存储，下面我们来通过云开发数据库能力实现这个效果。',
  152.       },
  153.       {
  154.         type: 'text',
  155.         content: `点击开发者工具顶部的【云开发】按钮，打开云开发控制台，选中【数据库】，新增一个商品集合命名${highlightText('goods')}，并添加若干条记录。注：本示例中，集合中的记录请保证具有${highlightText('title')}和${highlightText('price')}字段。`,
  156.       },
  157.       {
  158.         type: 'image',
  159.         content: 'scf-enter.png',
  160.       },
  161.       {
  162.         type: 'image',
  163.         content: 'database_add.png',
  164.       },
  165.       {
  166.         type: 'text',
  167.         content: `编辑后台接口代码${highlightText('cloudfunctions/quickstartFunctions/fetchGoodsList/index.js')}，用下面代码覆盖文件内容，用于读取数据库中数据：`,
  168.       },
  169.       {
  170.         type: 'code',
  171.         content: `
  172. const cloud = require('wx-server-sdk');
  173. cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
  174.  
  175. const db = cloud.database();
  176.  
  177. exports.main = async (event, context) => {
  178.   const result = await db.collection('goods')
  179.     .skip(0)
  180.     .limit(10)
  181.     .get();
  182.   return {
  183.     dataList: result?.data,
  184.   };
  185. };
  186.         `,
  187.       },
  188.       {
  189.         type: 'text',
  190.         content: `保存文件后，在${highlightText('cloudfunctions/quickstartFunctions')}目录右键，选择【上传并部署-云端安装依赖】，重新部署后台接口。`,
  191.       },
  192.       {
  193.         type: 'text',
  194.         content: '查看页面，可以看到正确获取数据库中的数据并显示在列表中。',
  195.       },
  196.       {
  197.         type: 'image',
  198.         content: 'list-database.png',
  199.       }
  200.     ],
  201.     showJumpButton: true,
  202.   },
  203.   {
  204.     id: '5',
  205.     title: '调用开放接口生成小程序码',
  206.     contents: [
  207.       {
  208.         type: 'text',
  209.         content: '实际小程序开发中，我们通常会对小程序进行传播分享。下面我们利用免鉴权的云调用能力实现小程序码。',
  210.       },
  211.       {
  212.         type: 'text',
  213.         content: `编辑教程内置的接口文件${highlightText('cloudfunctions/quickstartFunctions/genMpQrcode/index.js')}，用以下代码覆盖文件内容。该接口用于生成小程序码图片并上传到云存储保存。`,
  214.       },
  215.       {
  216.         type: 'code',
  217.         content: `
  218. const cloud = require('wx-server-sdk');
  219.  
  220. cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
  221.  
  222. exports.main = async (event, context) => {
  223.   const pagePath = event.pagePath;
  224.   // 获取小程序二维码的buffer
  225.   const resp = await cloud.openapi.wxacode.get({
  226.     path: pagePath,
  227.   });
  228.   const { buffer } = resp;
  229.   // 将图片上传云存储空间
  230.   const upload = await cloud.uploadFile({
  231.     cloudPath: String(pagePath).replaceAll('/', '_') + '.png',
  232.     fileContent: buffer
  233.   });
  234.   return upload.fileID;
  235. };
  236.         `,
  237.       },
  238.       {
  239.         type: 'text',
  240.         content: `保存文件后，在${highlightText('cloudfunctions/quickstartFunctions')}目录右键，选择【上传并部署-云端安装依赖】，部署该接口。`,
  241.       },
  242.       {
  243.         type: 'text',
  244.         content: `编辑商品列表页${highlightText('miniprogram/pages/goods-list/index.js')}，在 Page 配置中新增一个方法${highlightText('generateMPCode')}，用于调用接口获取小程序码：`,
  245.       },
  246.       {
  247.         type: 'code',
  248.         content: `
  249. async generateMPCode() {
  250.   wx.showLoading();
  251.   const resp = await wx.cloud.callFunction({
  252.     name: 'quickstartFunctions',
  253.     data: {
  254.       type: 'genMpQrcode',
  255.       pagePath: 'pages/goods-list/index',
  256.     }
  257.   });
  258.   this.setData({ codeModalVisible: true, codeImageSrc: resp?.result });
  259.   wx.hideLoading();
  260. },
  261.         `
  262.       },
  263.       {
  264.         type: 'text',
  265.         content: `保存文件后，在商品列表页点击【分享】按钮，会调用${highlightText('generateMPCode')}方法获取小程序码并弹框显示。`,
  266.       },
  267.       {
  268.         type: 'image',
  269.         content: 'list-share.png',
  270.       }
  271.     ],
  272.     showJumpButton: true,
  273.   },
  274. ];
  275.  
  276. module.exports = {
  277.   QuickStartPoints,
  278.   QuickStartSteps,
  279. }

这个文件定义了快速开始教程的知识点列表和步骤列表的数据结构，以及一个用于高亮显示文本的辅助函数。其他文件可以通过引入这个文件来获取这些数据,用于渲染页面内容。

1、const QuickStartPoints = [

  { id: '1', title: '无需搭建服务器，快速构建小程序' },

  { id: '2', title: '免登录、免鉴权调用微信开放服务' },

];

学习内容部分的文档，及对应的id、title

2、function highlightText(content) {

  return `<span> \`${content}\` </span>`;

}

高亮文本的方法，供后续调用

3、

  1. const QuickStartSteps = [
  2.   {
  3.     id: '1',
  4.     title: '创建列表页面并初始化数据',
  5.     contents: [
  6.       {
  7.         type: 'text',
  8.         content: `编辑教程内置的页面${highlightText('miniprogram/pages/goods-list/index.js')}，在${highlightText('Page')}的${highlightText('data')}配置项中添加初始化数据${highlightText('goodsList')}，代码如下所示。该页面将用于展示商品列表。`,
  9.       },
  10.       {
  11.         type: 'code',
  12.         content: `
  13. Page({
  14.   data: {
  15.     goodsList: [{
  16.       _id: '1',
  17.       title: '商品1',
  18.       price: 1,
  19.     }],
  20.   },
  21. })
  22.         `,
  23.       },
  24.       {
  25.         type: 'text',
  26.         content: '保存文件，查看页面，可以看到列表渲染出初始数据。',
  27.       },
  28.       {
  29.         type: 'image',
  30.         content: 'list-init.png',
  31.       }
  32.     ],
  33.     showJumpButton: true,
  34.   },
  35.   {
  36.     id: '2',
  37.     title: '实现并部署一个后台接口',
  38.     contents: [
  39.       {
  40.         type: 'text',
  41.         content: `编辑教程内置的后台接口文件${highlightText('cloudfunctions/quickstartFunctions/fetchGoodsList/index.js')}，使用下面代码覆盖文件内容，返回一些模拟的商品列表数据。`,
  42.       },
  43.       {
  44.         type: 'code',
  45.         content: `
  46. const cloud = require('wx-server-sdk');
  47. cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
  48. exports.main = async (event, context) => {
  49.   return {
  50.     dataList: [
  51.       { _id: '1', title: '微信气泡徽章', price: 1800 },
  52.       { _id: '2', title: '微信地球鼠标垫', price: 5800 },
  53.       { _id: '3', title: '微信黄脸大贴纸', price: 500 }
  54.     ],
  55.   }
  56. };
  57.         `
  58.       },
  59.       {
  60.         type: 'text',
  61.         content: `保存文件后，在${highlightText('cloudfunctions/quickstartFunctions')}目录右键，选择【上传并部署-云端安装依赖】，等待进度完成，即完成后端接口的开发与部署。`,
  62.       },
  63.       {
  64.         type: 'image',
  65.         content: 'function_deploy.png',
  66.       },
  67.       {
  68.         type: 'text',
  69.         content: `注：新用户部署时会提示创建云开发环境。<span style="color: red;">新用户可免费开通云开发环境并试用。</span>`,
  70.       },
  71.       {
  72.         type: 'image',
  73.         content: 'create_env.png',
  74.       },
  75.       {
  76.         type: 'text',
  77.         content: `新用户开通环境后在${highlightText('cloudfunctions')}目录右键，选择当前环境为新建的环境。`,
  78.       },
  79.       {
  80.         type: 'image',
  81.         content: 'env-select.png',
  82.       },
  83.     ],
  84.     showJumpButton: false,
  85.   },
  86.   {
  87.     id: '3',
  88.     title: '小程序端调用后台接口',
  89.     contents: [
  90.       {
  91.         type: 'text',
  92.         content: `编辑列表页${highlightText('miniprogram/pages/goods-list/index.js')}，在 Page 下新增一个方法${highlightText('fetchGoodsList')}，用于调用后端接口，并在 Page 的${highlightText('onLoad')}生命周期调用该方法：`,
  93.       },
  94.       {
  95.         type: 'code',
  96.         content: `
  97. async fetchGoodsList() {
  98.   this.setData({ isLoading: true });
  99.   const res = await wx.cloud.callFunction({
  100.     name: 'quickstartFunctions',
  101.     data: { type: 'fetchGoodsList' },
  102.   });
  103.   const goodsList = res?.result?.dataList || [];
  104.   this.setData({
  105.     isLoading: false,
  106.     goodsList
  107.   });
  108. },
  109.         `
  110.       },
  111.       {
  112.         type: 'code',
  113.         content: `
  114. onLoad() {
  115.   this.fetchGoodsList();
  116. },
  117.         `,
  118.       },
  119.       {
  120.         type: 'text',
  121.         content: `保存文件后，查看列表页，可以看到调用后台接口获取到了模拟数据并正确显示。`,
  122.       },
  123.       {
  124.         type: 'image',
  125.         content: 'list-scf.png',
  126.       }
  127.     ],
  128.     showJumpButton: true,
  129.   },
  130.   {
  131.     id: '4',
  132.     title: '从数据库中读取真实数据',
  133.     contents: [
  134.       {
  135.         type: 'text',
  136.         content: '前面步骤中，后台接口返回的是模拟数据，实际开发中，我们需要利用数据库实现持久存储，下面我们来通过云开发数据库能力实现这个效果。',
  137.       },
  138.       {
  139.         type: 'text',
  140.         content: `点击开发者工具顶部的【云开发】按钮，打开云开发控制台，选中【数据库】，新增一个商品集合命名${highlightText('goods')}，并添加若干条记录。注：本示例中，集合中的记录请保证具有${highlightText('title')}和${highlightText('price')}字段。`,
  141.       },
  142.       {
  143.         type: 'image',
  144.         content: 'scf-enter.png',
  145.       },
  146.       {
  147.         type: 'image',
  148.         content: 'database_add.png',
  149.       },
  150.       {
  151.         type: 'text',
  152.         content: `编辑后台接口代码${highlightText('cloudfunctions/quickstartFunctions/fetchGoodsList/index.js')}，用下面代码覆盖文件内容，用于读取数据库中数据：`,
  153.       },
  154.       {
  155.         type: 'code',
  156.         content: `
  157. const cloud = require('wx-server-sdk');
  158. cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
  159.  
  160. const db = cloud.database();
  161.  
  162. exports.main = async (event, context) => {
  163.   const result = await db.collection('goods')
  164.     .skip(0)
  165.     .limit(10)
  166.     .get();
  167.   return {
  168.     dataList: result?.data,
  169.   };
  170. };
  171.         `,
  172.       },
  173.       {
  174.         type: 'text',
  175.         content: `保存文件后，在${highlightText('cloudfunctions/quickstartFunctions')}目录右键，选择【上传并部署-云端安装依赖】，重新部署后台接口。`,
  176.       },
  177.       {
  178.         type: 'text',
  179.         content: '查看页面，可以看到正确获取数据库中的数据并显示在列表中。',
  180.       },
  181.       {
  182.         type: 'image',
  183.         content: 'list-database.png',
  184.       }
  185.     ],
  186.     showJumpButton: true,
  187.   },
  188.   {
  189.     id: '5',
  190.     title: '调用开放接口生成小程序码',
  191.     contents: [
  192.       {
  193.         type: 'text',
  194.         content: '实际小程序开发中，我们通常会对小程序进行传播分享。下面我们利用免鉴权的云调用能力实现小程序码。',
  195.       },
  196.       {
  197.         type: 'text',
  198.         content: `编辑教程内置的接口文件${highlightText('cloudfunctions/quickstartFunctions/genMpQrcode/index.js')}，用以下代码覆盖文件内容。该接口用于生成小程序码图片并上传到云存储保存。`,
  199.       },
  200.       {
  201.         type: 'code',
  202.         content: `
  203. const cloud = require('wx-server-sdk');
  204.  
  205. cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
  206.  
  207. exports.main = async (event, context) => {
  208.   const pagePath = event.pagePath;
  209.   // 获取小程序二维码的buffer
  210.   const resp = await cloud.openapi.wxacode.get({
  211.     path: pagePath,
  212.   });
  213.   const { buffer } = resp;
  214.   // 将图片上传云存储空间
  215.   const upload = await cloud.uploadFile({
  216.     cloudPath: String(pagePath).replaceAll('/', '_') + '.png',
  217.     fileContent: buffer
  218.   });
  219.   return upload.fileID;
  220. };
  221.         `,
  222.       },
  223.       {
  224.         type: 'text',
  225.         content: `保存文件后，在${highlightText('cloudfunctions/quickstartFunctions')}目录右键，选择【上传并部署-云端安装依赖】，部署该接口。`,
  226.       },
  227.       {
  228.         type: 'text',
  229.         content: `编辑商品列表页${highlightText('miniprogram/pages/goods-list/index.js')}，在 Page 配置中新增一个方法${highlightText('generateMPCode')}，用于调用接口获取小程序码：`,
  230.       },
  231.       {
  232.         type: 'code',
  233.         content: `
  234. async generateMPCode() {
  235.   wx.showLoading();
  236.   const resp = await wx.cloud.callFunction({
  237.     name: 'quickstartFunctions',
  238.     data: {
  239.       type: 'genMpQrcode',
  240.       pagePath: 'pages/goods-list/index',
  241.     }
  242.   });
  243.   this.setData({ codeModalVisible: true, codeImageSrc: resp?.result });
  244.   wx.hideLoading();
  245. },
  246.         `
  247.       },
  248.       {
  249.         type: 'text',
  250.         content: `保存文件后，在商品列表页点击【分享】按钮，会调用${highlightText('generateMPCode')}方法获取小程序码并弹框显示。`,
  251.       },
  252.       {
  253.         type: 'image',
  254.         content: 'list-share.png',
  255.       }
  256.     ],
  257.     showJumpButton: true,
  258.   },
  259. ];

文本、代码、id等内容，是在index.wxml中各步骤的内容，可以调用。

3、module.exports = {

  QuickStartPoints,

  QuickStartSteps,

}

导出 QuickStartPoints 和 QuickStartSteps 两个常量，供其他文件引用。

index.js

这个文件主要定义了页面的初始数据、事件处理函数和页面跳转函数,用于实现快速开始教程的交互逻辑。

  1. const { envList } = require("../../envList");
  2. const { QuickStartPoints, QuickStartSteps } = require("./constants");
  3.  
  4. Page({
  5.   data: {
  6.     knowledgePoints: QuickStartPoints,
  7.     steps: QuickStartSteps,
  8.   },
  9.  
  10.   copyCode(e) {
  11.     const code = e.target?.dataset?.code || '';
  12.     wx.setClipboardData({
  13.       data: code,
  14.       success: () => {
  15.         wx.showToast({
  16.           title: '已复制',
  17.         })
  18.       },
  19.       fail: (err) => {
  20.         console.error('复制失败-----', err);
  21.       }
  22.     })
  23.   },
  24.  
  25.   discoverCloud() {
  26.     wx.switchTab({
  27.       url: '/pages/examples/index',
  28.     })
  29.   },
  30.  
  31.   gotoGoodsListPage() {
  32.     wx.navigateTo({
  33.       url: '/pages/goods-list/index',
  34.     })
  35.   },
  36. });

1、const { envList } = require("../../envList");  引入环境配置文件，用于获取当前环境的相关信息。

2、const { QuickStartPoints, QuickStartSteps } = require("./constants");  引入常量文件，用于获取快速开始教程的知识点和步骤数据。

3、data: {

    knowledgePoints: QuickStartPoints,

    steps: QuickStartSteps,

  },  初始化页面的数据，包括知识点列表和步骤列表

4、copyCode(e) {...}:   定义一个事件处理函数,用于复制代码到剪贴板。

5、const code = e.target?.dataset?.code || '';  从事件对象中获取要复制的代码内容

6、wx.setClipboardData({。。。})  调用微信小程序API，将代码复制到剪贴板

7、success: () => {

        wx.showToast({

          title: '已复制',

        })

      },

      fail: (err) => {

        console.error('复制失败-----', err);

      }

如果复制成功，展示提示框；如果复制失败，打印错误日志。

8、discoverCloud() {

    wx.switchTab({

      url: '/pages/examples/index',

    })

  },

定义一个函数，用于跳转到实例页面，函数内调用微信小程序API，切换到指定的标签页面

9、gotoGoodsListPage() {

    wx.navigateTo({

      url: '/pages/goods-list/index',

    })

  },

定义一个函数，用于跳转到实例页面，函数内调用微信小程序API，导航到指定的标签页面

index.wxss

这个文件定义了页面的布局、字体、颜色等，与wxml结构文件和JavaScript逻辑文件配合，构成一个完整的微信小程序页面

  1. /**index.wxss**/
  2.  
  3. page {
  4.   /* padding-top: 54rpx; */
  5.   padding-bottom: 60rpx;
  6.   background-color: #fff;
  7. }
  8.  
  9. .container {
  10.   width: 100%;
  11.   height: 100%;
  12.   align-items: center;
  13. }
  14.  
  15. .main {
  16.   width: 90%;
  17.   display: flex;
  18.   flex-direction: column;
  19.   font-family: PingFang SC;
  20. }
  21.  
  22. .image_container {
  23.   margin-top: 48rpx;
  24.   display: flex;
  25.   justify-content: center;
  26. }
  27.  
  28. .title {
  29.   margin-bottom: 20rpx;
  30.   margin-top: 40rpx;
  31. }
  32.  
  33. .sub_title {
  34.   font-size: 28rpx;
  35.   color: rgba(0, 0, 0, 0.6);
  36.   line-height: 52rpx;
  37. }
  38.  
  39. /* 一级标题字体 */
  40. .font_title_1 {
  41.   font-weight: 500;
  42.   color: #000;
  43.   font-size: 48rpx;
  44. }
  45.  
  46. /* 二级标题字体 */
  47. .font_title_2 {
  48.   color: #000;
  49.   font-size: 32rpx;
  50.   font-weight: 500;
  51.   font-family: "PingFang SC";
  52. }
  53.  
  54. /* 内容字体 */
  55. .font_content {
  56.   font-size: 32rpx;
  57.   color: rgba(0, 0, 0, 0.6);
  58.   line-height: 52rpx;
  59. }
  60.  
  61. .seperator {
  62.   border-top: 2rpx solid #dcdcdc;
  63.   margin-top: 60rpx;
  64.   margin-bottom: 60rpx;
  65. }
  66.  
  67. .ability_container {
  68.   border: 2rpx solid #e5e5e5;
  69.   padding: 48rpx;
  70.   box-sizing: border-box;
  71.   border-radius: 20rpx;
  72.   background-color: #f5f5f5;
  73.   display: flex;
  74.   flex-direction: column;
  75.   gap: 16rpx;
  76.   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  77.   margin-top: 48rpx;
  78. }
  79.  
  80. .ability_title {
  81.   font-size: 36rpx;
  82.   font-weight: 500;
  83.   color: #000;
  84. }
  85.  
  86. .ability_item {
  87.   color: rgba(0, 0, 0, 0.6);
  88.   font-size: 28rpx;
  89. }
  90.  
  91. .ability_item::before {
  92.   content: "";
  93.   display: inline-block;
  94.   width: 12rpx;
  95.   height: 12rpx;
  96.   border-radius: 50%;
  97.   background-color: rgba(0, 0, 0, 0.6);
  98.   margin-right: 12rpx;
  99. }
  100.  
  101. .step_container {
  102.   box-sizing: border-box;
  103.   border-radius: 10rpx;
  104.   display: flex;
  105.   flex-direction: column;
  106. }
  107.  
  108. .step_title,
  109. .step_content {
  110.   padding: 8rpx;
  111.   background-color: #fff;
  112. }
  113.  
  114. .step_title {
  115.   display: flex;
  116.   align-items: center;
  117.   gap: 16rpx;
  118. }
  119.  
  120. .step_id_container {
  121.   display: flex;
  122.   font-size: 28rpx;
  123.   align-items: center;
  124.   height: 36rpx;
  125.   line-height: 36rpx;
  126.   font-weight: 400;
  127. }
  128.  
  129. .step_id_mark {
  130.   background-color: rgba(0, 0, 0, 0.5);
  131.   border-radius: 2px 0px 0px 2px;
  132.   color: #fff;
  133.   height: 40rpx;
  134.   line-height: 40rpx;
  135.   width: 70rpx;
  136.   text-align: center;
  137. }
  138.  
  139. .step_id_content {
  140.   width: 50rpx;
  141.   text-align: center;
  142.   background-color: #fff;
  143.   color: rgba(0, 0, 0, 0.5);
  144.   border: 1px solid rgba(0, 0, 0, 0.5);
  145.   border-left: none;
  146.   box-sizing: border-box;
  147.   border-radius: 0px 2px 2px 0px;
  148. }
  149.  
  150. .step_content {
  151.   background-color: #fff;
  152.   color: #666;
  153.   font-size: 28rpx;
  154.   word-break: break-all;
  155. }
  156.  
  157. .text_zone {
  158.   margin-top: 20rpx;
  159.   margin-bottom: 48rpx;
  160.   color: rgba(0, 0, 0, 0.6);
  161. }
  162.  
  163. .code_zone {
  164.   background-color: #0E190E;
  165.   color: rgba(255, 255, 255, 0.7);
  166.   border-radius: 12rpx;
  167.   padding: 0rpx 32rpx;
  168.   box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  169.   position: relative;
  170.   margin-bottom: 48rpx;
  171. }
  172.  
  173. .image_zone {
  174.   display: flex;
  175.   justify-content: center;
  176.   margin-bottom: 48rpx;
  177. }
  178.  
  179. .btn-copy {
  180.   border-radius: 12rpx;
  181.   height: 40rpx;
  182.   width: 40rpx;
  183.   position: absolute;
  184.   right: 20rpx;
  185.   bottom: 20rpx;
  186. }
  187.  
  188. .bottom-tip {
  189.   margin-top: 10rpx;
  190.   color: rgba(0, 0, 0, 0.9);
  191.   font-size: 28rpx;
  192.   line-height: 52rpx;
  193. }
  194.  
  195. .button {
  196.   width: 70%;
  197.   text-align: center;
  198.   margin: 40rpx auto 0 auto;
  199.   color: white;
  200.   border-radius: 5px;
  201.   height: 80rpx;
  202.   line-height: 80rpx;
  203.   background-color: #07c160;
  204. }
  205.  
  206. .btn-view-demo-page {
  207.   width: 100%;
  208.   text-align: center;
  209.   color: white;
  210.   border-radius: 5px;
  211.   font-size: 26rpx;
  212.   padding: 16rpx 0rpx;
  213.   box-sizing: border-box;
  214.   border: 1px solid #07c160;
  215.   color: #07c160;
  216.   font-size: 32rpx;
  217. }
  218.  
  219. .with-margin {
  220.   margin-top: 48rpx;
  221. }

1、/**index.wxss**/   这是一个CSS注释，标识该文件是index的样式文件

2、page {

  /* padding-top: 54rpx; */

  padding-bottom: 60rpx;

  background-color: #fff;

}

选择器，定义了整个页面的样式，页面底部内边距为60rpx，北京颜色为白色。

3、.container {

  width: 100%;

  height: 100%;

  align-items: center;

}

选择器，定义了页面容器的样式，宽度和高度占满了整个页面，且子元素在容器内水平居中位置。

4、.main {

  width: 90%;

  display: flex;

  flex-direction: column;

  font-family: PingFang SC;

}

选择器，定义了主要内容区域的样式，宽度占90%，flex布局，子元素垂直排列，字体为PingFang SC

5、.image_container {

  margin-top: 48rpx;

  display: flex;

  justify-content: center;

}

选择器，定义了图片区域的样式，头部内边距为60rpx，flex布局，居中。

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号