初识微信小程序

酒楼

发布于 2023-06-09 11:44:09

8620

文章被收录于专栏：酒楼酒楼

初识微信小程序

1.项目入口

在微信小程序中，小程序的入口是一个叫做”app.js”的文件。这个文件是小程序的全局脚本文件，用于定义小程序的生命周期和全局函数。当用户打开小程序时，”app.js”会被首先加载和执行。

在”app.js”文件中，你可以监听小程序的生命周期事件，例如onLaunch、onShow和onHide等。通过这些事件，你可以在小程序启动时执行初始化操作、在小程序显示和隐藏时做一些处理等。

除了”app.js”文件，微信小程序还有其他一些入口文件，例如”app.json”和”app.wxss”。”app.json”用于配置小程序的全局配置，包括页面路径、窗口样式、导航栏样式等。”app.wxss”用于定义小程序的全局样式。

总结起来，微信小程序的入口是”app.js”文件，但也需要配置”app.json”和定义”app.wxss”来完成小程序的初始化和样式设置。

2.分析app.js

import gulpError from './utils/gulpError';
App({
    onShow() {
        if (gulpError !== 'gulpErrorPlaceHolder') {
            wx.redirectTo({
                url: `/pages/gulp-error/index?gulpError=${gulpError}`,
            });
        }
    },
});

这段代码是一个微信小程序的全局配置代码，其中使用了App()函数来定义小程序的全局实例对象。

以下是对代码的分析：

import gulpError from './utils/gulpError'; 这行代码使用ES6的模块导入语法，将./utils/gulpError模块导入，并将导出的默认值赋给gulpError变量。这个模块可能是用于处理Gulp构建过程中的错误的工具函数或变量。
App({ ... }); 这是App()函数的调用，用于定义小程序的全局实例对象。通过传入一个对象作为参数，可以在该对象中定义小程序的生命周期函数、全局数据、全局方法等。
onShow() { ... } 这是一个生命周期函数onShow的定义，它在小程序启动或从后台进入前台时触发。在该函数内部进行了一些处理。
if (gulpError !== 'gulpErrorPlaceHolder') { ... } 这是一个条件判断语句，检查gulpError变量的值是否等于字符串'gulpErrorPlaceHolder'。如果不相等，则执行条件块中的代码。
wx.redirectTo({ url: /pages/gulp-error/index?gulpError=${gulpError} }); 这是wx.redirectTo()函数的调用，用于进行页面跳转。它的参数是一个对象，其中url属性指定了要跳转到的页面路径，并通过模板字符串的形式插入了gulpError变量的值作为查询参数传递给目标页面。

综上所述，这段代码的作用是在小程序启动或从后台进入前台时，如果gulpError变量的值不等于'gulpErrorPlaceHolder'，则会跳转到一个名为gulp-error的页面，并将gulpError的值作为查询参数传递给目标页面。

TDesign UI

1.新增一个页面

在app.json 的pages节点下新增一行”pages/fabric/fabric”

编译后就会在pages目录下生成一个新的文件夹fabric

文件夹下有四个文件，分别是

——fabric.js

——fabric.json

——fabric.wxml

——fabric.wxss

2.对话框（dialog）

<t-button
  t-class="wrapper"
  theme="primary"
  size="large"
  variant="outline"
  data-key="showTextAndTitleWithInput"
  bind:tap="showDialog"
  block
  >查询某款酒</t-button
>
<t-dialog
  visible="{{showTextAndTitleWithInput}}"
  title="带输入框对话框"
  content="根据唯一id查询某一款酒，如果您不知道具体id，建议查询所有酒"
  confirm-btn="确定"
  cancel-btn="取消"
  bind:confirm="sendPostRequest"
  bind:cancel="closeDialog"
>
  <t-input
    borderless
    class="dialog-input"
    clearable
    slot="content"
    placeholder="输入12文案"
    placeholder-class="placeholder"
    bindchange="handleInputChange"
  />
</t-dialog>

加入这个组件后会生成有一个按钮：

点开按钮就是一个对话框了：

3.函数发送http请求

sendPostRequest() {
    const inputValue = this.data.inputValue;
    const url = "http://xxxxxx:xx/xx/xx";
    const data = {
      cmd: {
        channel: "winechannel",
        chaincode: "mycontract",
        action: "query",
        args:[inputValue]
      }
    };
    
    wx.request({
      url: url,
      method: "POST",
      data: data,
      success: (res) => {
        // 请求成功的处理逻辑
        // 将结果转换为字符串
        const table = JSON.stringify(res.data, null, 2);
        this.setData({resultText: table});
        const { dialogKey } = this.data;
        this.setData({ [dialogKey]: false });
        
      },
      fail: (error) => {
        // 请求失败的处理逻辑
        console.error(error);
      }
    });
  }