微信小程序新手入门教程

一、准备工作

登录微信小程序官网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

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