微信小程序新手入门教程

一、准备工作

登录微信小程序官网mp.wx.qq.com注册账号

下载微信开发者工具

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

选择JS模板

二、对小程序页面进行路由配置

在pages文件夹中创建一个新的文件夹

再在新创建的文件夹中新建page

js 文件：页面逻辑

wxml 文件：页面结构

json 文件，页面配置

wxss 文件，页面样式

打开小程序中的app.json文件

在pages下添加新建的页面路径

讲新建的页面放在第一个

此时左边模拟器显示效果如下即页面路由配置完成

app.json中window中各选项的作用

tabBar 底部栏的配置

 设置成功后样式

 三、页面如何编辑

我们打开home.wxml文件

文本标签

  块状区域

  块状区域

  文本组件

  文本组件

这里的view就相当于html中的div元素

然后在home.wxss中进行css修改

 四、表单组件

  输入框

 value   值
 placeholder   提示文本
 password=true   密码框
 type   弹出不同键盘
text    文本输入键盘    
number    数字输入键盘    
idcard    身份证输入键盘    
digit    带小数点的数字键盘    
safe-password    密码安全输入键盘
nickname    昵称输入键盘

 comfirm-type   键盘右下角案例
send    右下角按钮为“发送”
search    右下角按钮为“搜索”
next    右下角按钮为“下一个”
go    右下角按钮为“前往”
done    右下角按钮为“完成”
   按钮

type   颜色类型

primary    绿色
default    白色
warn    红色

size = “mini”   行内小按钮

  开关选择器

color   颜色
type =“checkbox”   选择框

  从底部弹起的滚动选择器

header-text   选择器的标题，仅安卓可用
mode   选择器类型

times时间
date 日期
region 省市区

提交 提交 提交 点击选择

五、容器组件

  可滚动视图区域

scroll-x   水平，允许横向滚动
scroll-y   垂直，允许纵向滚动

    
        1
        2
        3
    
    
        
            1
            2
            3
        
    

   滑块视图容器

 其中只可放置  组件

indicator-dots="true"   是否显示提示点

autoplay="true"   自动播放

circular="true"   衔接滑动

    
        1
    
    
        2
    
    
        3
    

六、条件渲染

wx:if   等同于

使用 wx:if="" 来判断是否需要渲染该代码块

wx:else、wx:elif

也可以用 wx:else 和 wx:elif 来添加一个 else 块

七、列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组

wx:key

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