微信小程序二次记录

微信小程序二次记录

微信小程序的基本结构包括以下几个主要组成部分：

1. app.json

   • 应用配置文件，用于定义小程序的整体配置，包括页面路径、窗口样式等。

2. app.wxss

   • 应用公共样式表，用于定义全局样式。

3. app.js

   • 应用逻辑层文件，用于定义全局变量和函数。

4. pages/ 和 components/ 目录

   • pages/目录存放页面文件，每个页面由.js、.json、.wxml和.wxss四个文件组成。
   • components/目录存放可复用的组件文件。

页面文件组成

1. page.wxml

   • 结构文件，使用XML语法来描述页面的结构。

2. page.wxss

   • 样式文件，类似于CSS，用于定义页面样式。

3. page.js

   • 逻辑文件，用于定义页面的数据和事件处理函数。

4. page.json

   • 页面配置文件，用于定义页面的配置信息。

基础组件

1. view

   • 通用容器组件，可以嵌套其他组件。

2. image

   • 图片组件，用于展示图片。

3. button

   • 按钮组件，用于触发事件。

4. text

   • 文本组件，用于展示文本。

5. form

   • 表单组件，用于收集用户的输入。

事件绑定

1. bindtap

   • 绑定点击事件。

2. bindinput

   • 绑定输入事件。

3. bindsubmit

   • 绑定表单提交事件。

API和组件

1. API

   • 微信提供了丰富的API，包括网络请求、位置服务、支付等功能。

2. 组件

   • 微信提供了多种预定义的组件，如导航栏、轮播图、地图等。

开发流程

1. 代码编写

   • 使用WXML和WXSS定义界面布局和样式。
   • 使用JS处理页面逻辑和交互。

2. 代码调试

   • 利用微信开发者工具进行调试。

3. 上传代码

   • 在微信开发者工具中上传代码至微信公众平台。

4. 审核发布

   • 提交审核后，等待微信团队审核通过。
   • 审核通过后，正式发布小程序，然后就拥有自己的小程序啦。

代码示例：

下面是一个简单小示例，展示了如何创建一个包含按钮的小程序页面：

<!-- pages/index/index.wxml -->
<button bindtap="handleClick">点击我</button>

// pages/index/index.js
Page({
  data: {
    message: 'Hello, World!'
  },
  
  handleClick: function(e) {
    console.log('Button clicked!');
    this.setData({
      message: 'Button has been clicked!'
    });
  }
});

// pages/index/index.json
{
  "navigationBarTitleText": "首页"
}

未完待续》》》