1.环境搭建

1.1 下载开发者工具

微信开发者工具下载地址与更新日志 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

1.2 注册小程序

获取小程序AppId

2.小程序组件

1.view：用于展示视图元素，类似于HTML中的div标签。

<view>这是一个视图元素</view>

2.text：用于显示文本内容。

<text>这是文本内容</text>

3.image：用于显示图片。

<image src="/path/to/image.jpg"></image>

4.button：用于创建可点击的按钮。

<button bindtap="handleTap">点击按钮</button>

5.input：用于创建输入框，用于用户输入内容。

<input placeholder="请输入内容"></input>

6.scroll-view：用于创建可滚动的区域，通常用于显示较长的内容。

<scroll-view scroll-y="true">这是可滚动的区域</scroll-view>

7.swiper：用于创建图片轮播组件，可以实现图片的自动轮播效果。

<swiper autoplay="true">

        <br>

                <swiper-item><image src="/path/to/image1.jpg"></image></swiper-item><br>

                <swiper-item><image src="/path/to/image2.jpg"></image></swiper-item><br></swiper>

8.icon：用于显示图标，微信小程序内置了一些常用图标，也支持自定义图标。

<icon type="success"></icon>

9.navigator：用于创建导航链接，可以跳转到其他页面。

<navigator url="/pages/other-page">跳转到其他页面</navigator>

wx.navigateTo({

url: '/pages/other-page',

})

10.checkbox：用于创建复选框。

<checkbox value="1">选项1</checkbox>

11.radio：用于创建单选框。

<radio value="1">选项1</radio>

12.form：用于创建表单，包含一组表单元素，用于提交数据。

<form bindsubmit="handleFormSubmit">

        <br> <input name="username" placeholder="用户名"></input>

        <br> <input name="password" type="password" placeholder="密码"></input>

        <br> <button form-type="submit">提交</button><br>

</form>

13.picker：用于创建选择器，可以选择列表中的一项。