微信小程序初体验

安装

官方文档

首先下载微信小程序的开发者工具小程序开发者工具，再下载微信小程序DEMO源码



安装开发者工具，并解压DEMO源码，在开发者工具中导入源码项目

注册

打开微信公众平台，在里面注册账号选择小程序，用户体选择个人

app.json

我们使用

app.json

文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等

pages

如果学过其他框架，可以把它理解为路由，在

app.json

文件的

pages

属性里面定义路由和对应的组件，默认是在pages文件夹里面寻找xxx组件的xxx.js文件，当然没有后缀

pages/index/index => page文件夹下的index组件的文件夹下的所有资源

pages接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成，每一项代表对应页面的

路径+文件名

信息

数组的第一项代表小程序的初始页面，小程序中新增/减少页面，都需要对 pages 数组进行修改

文件名不需要写文件后缀，因为框架会自动去寻找路径

.json,.js,.wxml,.wxss

的四个文件进行整合

{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/test/test",
"pages/text/text"
],
//code
}

tabBar

tabBar其实就是配置底部的选项卡，在

app.json

文件的

tabBar

属性里面定义底部的选项卡的详细配置



如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有tab栏可以切换页面)，那么我们可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面

通过页面跳转

wx.navigateTo

或者页面重定向

wx.redirectTo

所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的tab栏

tabBar是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序

{
//code
"tabBar": {
"color": "#666",
"selectedColor": "#268dcd",
"borderStyle": "white",
"backgroundColor": "#fafafa",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "image/wscats.png",
"selectedIconPath": "image/wscats.png",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "分类"
}
//code
]
}
}

一般我们可以新建一个放图标的文件夹image，此文件夹跟pages同级，然后在里面我们可以放图标



我在文件夹里面放了两张图片

wscats.pn

g和

wscats-active.png

，我们就可以在

iconPat

h和

selectedIconPath

里面把图片引进来，设置的分别是切换选项卡时候出现的图标

tabBar属性	作用
color	未选中时候文字颜色
selectedColor	选中时候文字颜色
borderStyle	边样式，可以设置颜色和粗细
backgroundColor	背景颜色
list	详情看下表

list接受一个数组，数组中的每个项都是一个对象，其属性值如下

list属性	作用
pagePath	跳转路由
iconPath	未选中时候的图标
selectedIconPath	选中时候的图标
text	文字描述

window

用于设置小程序的状态栏、导航条、标题、窗口背景色

networkTimeout

可以设置各种网络请求的超时时间

debug

可以在开发者工具中开启debug模式，在开发者工具的控制台面板，调试信息以info的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。可以帮助开发者快速定位一些常见的问题

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置app.json中的window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项

页面的.json只能设置window相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键

如图，在logs组件里面的logs.json设置对应的参数，那就会覆盖app.json原有的配置项

WeUI

在Github下载WeUI for 小程序 为微信小程序量身设计 Github仓库

把

weui-wxss/dist/style/

目录中的weui.wxss放到程序根目录下，然后在app.wxss全局引用weui样式

@import 'weui.wxss';

然后就可以复制粘贴

src/example

文件夹里面的组件进行开发了

导航

导航相当于路由跳转，用

navigator

标签，然后在属性值上面放自己定义好的组件页面

"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/test/test",
"pages/text/text",
"pages/detail/detail"
],

比如要跳到详情页组件就写

url="/pages/detail/detail"

，如果要跳到主页那就写

url="/pages/index/index"

，根据pages属性值里面定义好的路由去改相应的链接地址

<navigator url="/pages/detail/detail" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active"></navigator>

路由传参

我们在链接上带上哈希值，然后传递给详情页

<navigator url="/pages/detail/detail?id={{index}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

在详情页中获取options中的哈希值

Page({
onLoad: function (options) {
console.log(options)
}
})

获取视图输入值

input输入框显示自己输入的值，

bindinput

来对输入的值进行接受，再把值赋给一个变量

<input name="user" value="{{user}}" bindinput="inputUser" type="text" />

value="{{user}}"

显示绑定的值，bindinput绑定事件，在e中的detail属性中获取

inputUser: function (e) {
console.log(e.detail.value)
this.setData({
user: e.detail.value
})
}