微信小程序实例代码解读

zhangbin_2372024-08-17 23:31

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

主页代码：

index.wxml

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

源代码：

python 复制代码 
<!--index.wxml-->
<view class="container">
  <view class="main">
    <view class="title font_title_1">快速开始</view>
    <view class="sub_title">
      欢迎使用云开发！本页将带你了解如何使用云开发提供的能力快速开发小程序。
    </view>
    <view class="ability_container">
      <view class="ability_title">你将学习到</view>
      <view class="ability_item" wx:for="{{ knowledgePoints }}" wx:for-item="point" wx:key="id">
        {{ point.title }}
      </view>
    </view>

    <view class="title font_title_2">5分钟上手教程</view>
    <view class="sub_title">
      我们将会使用常用的云开发能力，快速实现一个简单的商品列表页面。无需购买服务器，即可快速开发出后台服务、读取数据库、存取文件、调用微信开放服务。页面最终效果如下图所示。
    </view>
    <view class="image_container">
      <image src="../../images/list-database.png" mode="widthFix" />
    </view>

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

    <view class="seperator" />
    <view class="step_container" wx:for="{{ steps }}" wx:key="id" wx:for-item="step">
      <view id="step_{{ step.id }}" data-step="{{ step.id }}" class="step_title">
        <view class="step_id_container">
          <view class="step_id_mark">NO.</view>
          <view class="step_id_content">0{{ step.id }}</view>
        </view>
        <view class="font_title_2">{{ step.title }}</view>
      </view>
      <view class="step_content">
        <block wx:for="{{ step.contents }}" wx:for-item="item" wx:key="index">
          <view wx:if="{{ item.type === 'text' }}" class="text_zone">
            <rich-text nodes="<p style='line-height: 26px;'>{{ item.content }}</p>" />
          </view>
          <view wx:if="{{ item.type === 'code' }}" class="code_zone">
            <image class="btn-copy" data-code="{{ item.content }}" bind:tap="copyCode" src="../../images/icons/copy.png" />
            <rich-text nodes="<pre style='overflow: scroll;'>{{ item.content }}</pre>" />
          </view>
          <view wx:if="{{ item.type === 'image' }}" class="image_zone">
            <image src="../../images/{{ item.content }}" mode="widthFix" />
          </view>
        </block>
      </view>
      <view wx:if="{{ step.showJumpButton }}" class="btn-view-demo-page" bind:tap="gotoGoodsListPage">查看页面</view>
      <view class="seperator" />
    </view>

    <view class="bottom-tip">
      至此，我们完成了一个带分享功能的小程序，利用了云开发的云函数、云数据库、云存储等能力，无需服务器即可快速完成较为复杂的功能。
    </view>
    <view  class="bottom-tip">此外，云开发还提供了云模板、云后台、云托管等更多高级能力，可点击下方按钮前往查看。</view>
    <view class="button" bind:tap="discoverCloud">探索云开发更多功能</view>
  </view>
</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、

python 复制代码 
      <view class="step_content">
        <block wx:for="{{ step.contents }}" wx:for-item="item" wx:key="index">
          <view wx:if="{{ item.type === 'text' }}" class="text_zone">
            <rich-text nodes="<p style='line-height: 26px;'>{{ item.content }}</p>" />
          </view>
          <view wx:if="{{ item.type === 'code' }}" class="code_zone">
            <image class="btn-copy" data-code="{{ item.content }}" bind:tap="copyCode" src="../../images/icons/copy.png" />
            <rich-text nodes="<pre style='overflow: scroll;'>{{ item.content }}</pre>" />
          </view>
          <view wx:if="{{ item.type === 'image' }}" class="image_zone">
            <image src="../../images/{{ item.content }}" mode="widthFix" />
          </view>
        </block>
      </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

python 复制代码 
/**
 * 快速开始教程知识点
 */
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,
}

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

1、const QuickStartPoints = [

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

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

];

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

2、function highlightText(content) {

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

}

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

3、

python 复制代码 
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,
  },
];

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

3、module.exports = {

QuickStartPoints,

QuickStartSteps,

}

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

index.js

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

python 复制代码 
const { envList } = require("../../envList");
const { QuickStartPoints, QuickStartSteps } = require("./constants");

Page({
  data: {
    knowledgePoints: QuickStartPoints,
    steps: QuickStartSteps,
  },

  copyCode(e) {
    const code = e.target?.dataset?.code || '';
    wx.setClipboardData({
      data: code,
      success: () => {
        wx.showToast({
          title: '已复制',
        })
      },
      fail: (err) => {
        console.error('复制失败-----', err);
      }
    })
  },

  discoverCloud() {
    wx.switchTab({
      url: '/pages/examples/index',
    })
  },

  gotoGoodsListPage() {
    wx.navigateTo({
      url: '/pages/goods-list/index',
    })
  },
});

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逻辑文件配合，构成一个完整的微信小程序页面

python 复制代码 
/**index.wxss**/

page {
  /* padding-top: 54rpx; */
  padding-bottom: 60rpx;
  background-color: #fff;
}

.container {
  width: 100%;
  height: 100%;
  align-items: center;
}

.main {
  width: 90%;
  display: flex;
  flex-direction: column;
  font-family: PingFang SC;
}

.image_container {
  margin-top: 48rpx;
  display: flex;
  justify-content: center;
}

.title {
  margin-bottom: 20rpx;
  margin-top: 40rpx;
}

.sub_title {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.6);
  line-height: 52rpx;
}

/* 一级标题字体 */
.font_title_1 {
  font-weight: 500;
  color: #000;
  font-size: 48rpx;
}

/* 二级标题字体 */
.font_title_2 {
  color: #000;
  font-size: 32rpx;
  font-weight: 500;
  font-family: "PingFang SC";
}

/* 内容字体 */
.font_content {
  font-size: 32rpx;
  color: rgba(0, 0, 0, 0.6);
  line-height: 52rpx;
}

.seperator {
  border-top: 2rpx solid #dcdcdc;
  margin-top: 60rpx;
  margin-bottom: 60rpx;
}

.ability_container {
  border: 2rpx solid #e5e5e5;
  padding: 48rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  margin-top: 48rpx;
}

.ability_title {
  font-size: 36rpx;
  font-weight: 500;
  color: #000;
}

.ability_item {
  color: rgba(0, 0, 0, 0.6);
  font-size: 28rpx;
}

.ability_item::before {
  content: "";
  display: inline-block;
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  margin-right: 12rpx;
}

.step_container {
  box-sizing: border-box;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
}

.step_title,
.step_content {
  padding: 8rpx;
  background-color: #fff;
}

.step_title {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.step_id_container {
  display: flex;
  font-size: 28rpx;
  align-items: center;
  height: 36rpx;
  line-height: 36rpx;
  font-weight: 400;
}

.step_id_mark {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 2px 0px 0px 2px;
  color: #fff;
  height: 40rpx;
  line-height: 40rpx;
  width: 70rpx;
  text-align: center;
}

.step_id_content {
  width: 50rpx;
  text-align: center;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-left: none;
  box-sizing: border-box;
  border-radius: 0px 2px 2px 0px;
}

.step_content {
  background-color: #fff;
  color: #666;
  font-size: 28rpx;
  word-break: break-all;
}

.text_zone {
  margin-top: 20rpx;
  margin-bottom: 48rpx;
  color: rgba(0, 0, 0, 0.6);
}

.code_zone {
  background-color: #0E190E;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 12rpx;
  padding: 0rpx 32rpx;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  margin-bottom: 48rpx;
}

.image_zone {
  display: flex;
  justify-content: center;
  margin-bottom: 48rpx;
}

.btn-copy {
  border-radius: 12rpx;
  height: 40rpx;
  width: 40rpx;
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
}

.bottom-tip {
  margin-top: 10rpx;
  color: rgba(0, 0, 0, 0.9);
  font-size: 28rpx;
  line-height: 52rpx;
}

.button {
  width: 70%;
  text-align: center;
  margin: 40rpx auto 0 auto;
  color: white;
  border-radius: 5px;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #07c160;
}

.btn-view-demo-page {
  width: 100%;
  text-align: center;
  color: white;
  border-radius: 5px;
  font-size: 26rpx;
  padding: 16rpx 0rpx;
  box-sizing: border-box;
  border: 1px solid #07c160;
  color: #07c160;
  font-size: 32rpx;
}

.with-margin {
  margin-top: 48rpx;
}

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布局，居中。

相关推荐
郭wes代码39 分钟前
Cmd命令大全（万字详细版）
python·算法·小程序
.生产的驴6 小时前
SpringBoot 对接第三方登录 手机号登录 手机号验证 微信小程序登录 结合Redis SaToken
java·spring boot·redis·后端·缓存·微信小程序·maven
汤姆yu11 小时前
基于微信小程序的乡村旅游系统
微信小程序·旅游·乡村旅游
计算机徐师兄11 小时前
基于TP5框架的家具购物小程序的设计与实现【附源码、文档】
小程序·php·家具购物小程序·家具购物微信小程序·家具购物
曲辒净12 小时前
微信小程序实现二维码海报保存分享功能
微信小程序·小程序
朽木成才13 小时前
小程序快速实现大模型聊天机器人
小程序·机器人
peachSoda713 小时前
随手记：小程序使用uni.createVideoContext视频无法触发播放
小程序
何极光13 小时前
uniapp小程序样式穿透
前端·小程序·uni-app
小墨&晓末14 小时前
【PythonGui实战】自动摇号小程序
python·算法·小程序·系统安全
oil欧哟1 天前
🤔认真投入一个月做的小程序，能做成什么样子？有人用吗？
前端·vue.js·微信小程序
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）