一、准备工作
登录微信小程序官网mp.wx.qq.com注册账号
下载微信开发者工具
创建小程序项目文件夹,并创建小程序模板
选择JS模板
二、对小程序页面进行路由配置
在pages文件夹中创建一个新的文件夹
再在新创建的文件夹中新建page
js 文件:页面逻辑
wxml 文件:页面结构
json 文件,页面配置
wxss 文件,页面样式
打开小程序中的app.json文件
在pages下添加新建的页面路径
讲新建的页面放在第一个
此时左边模拟器显示效果如下即页面路由配置完成
app.json中window中各选项的作用
tabBar 底部栏的配置
设置成功后样式
三、页面如何编辑
我们打开home.wxml文件
<view class="title">文本标签</view>
<view>
<view>块状区域</view>
<view>块状区域</view>
<text>文本组件</text>
<text user-select="true">文本组件</text>
</view>
这里的view就相当于html中的div元素
然后在home.wxss中进行css修改
四、表单组件
<input> 输入框
value 值
placeholder 提示文本
password=true 密码框
type 弹出不同键盘
text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘
safe-password 密码安全输入键盘
nickname 昵称输入键盘
comfirm-type 键盘右下角案例
send 右下角按钮为“发送”
search 右下角按钮为“搜索”
next 右下角按钮为“下一个”
go 右下角按钮为“前往”
done 右下角按钮为“完成”
<button> 按钮
type 颜色类型
primary 绿色
default 白色
warn 红色
size = “mini” 行内小按钮
<switch> 开关选择器
color 颜色
type =“checkbox” 选择框
<picker> 从底部弹起的滚动选择器
header-text 选择器的标题,仅安卓可用
mode 选择器类型
times时间
date 日期
region 省市区
<input placeholder="请输入" password="true"></input>
<view>
<button>提交</button>
<button type="primary" style="width: 100%;">提交</button>
<button type="warn" size="mini">提交</button>
</view>
<switch></switch>
<switch checked="true" color="#d90"></switch>
<switch type="checkbox"></switch>
<picker mode="date">点击选择</picker>
五、容器组件
<scroll-view> 可滚动视图区域
scroll-x 水平,允许横向滚动
scroll-y 垂直,允许纵向滚动
<scroll-view class="s1" scroll-y="true">
<view class="item" style="background-color: rgb(255, 242, 126);">1</view>
<view class="item" style="background-color: rgb(126, 195, 255);">2</view>
<view class="item" style="background-color: rgb(173, 255, 126);">3</view>
</scroll-view>
<scroll-view class="s1" scroll-x="true">
<view class="s2">
<view class="item" style="background-color: rgb(186, 126, 255);">1</view>
<view class="item" style="background-color: rgb(126, 195, 255);">2</view>
<view class="item" style="background-color: rgb(173, 255, 126);">3</view>
</view>
</scroll-view>
<swiper> 滑块视图容器
其中只可放置 <swiper-item> 组件
indicator-dots="true" 是否显示提示点
autoplay="true" 自动播放
circular="true" 衔接滑动
<swiper class="swiper" autoplay="true" circular="true" indicator-dots="true">
<swiper-item>
<view style="background-color: rgb(255, 242, 126);">1</view>
</swiper-item>
<swiper-item>
<view style="background-color: rgb(126, 195, 255);">2</view>
</swiper-item>
<swiper-item>
<view style="background-color: rgb(173, 255, 126);">3</view>
</swiper-item>
</swiper>
六、条件渲染
wx:if 等同于
使用 wx:if="" 来判断是否需要渲染该代码块
wx:else、wx:elif
也可以用 wx:else 和 wx:elif 来添加一个 else 块
七、列表渲染
wx:for
在组件上使用 wx:for 控制属性绑定一个数组
wx:key
用来指定列表中项目的唯一的标识符