1.微信小程序开发-快速上手

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：用于创建选择器，可以选择列表中的一项。

<picker mode="selector" bindchange="handlePickerChange" range="{{['选项1', '选项2', '选项3']}}">

<br> <view>当前选择：{{selectedValue}}</view>

<br></picker>

        14.slider：用于创建滑动选择器。

<slider bindchange="handleSliderChange" value="{{sliderValue}}"></slider>

        15.progress：用于显示进度条。

<progress percent="{{progressValue}}"></progress>