一、准备工作

创建小程序项目文件夹，并创建小程序模板

选择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

用来指定列表中项目的唯一的标识符