安装好开发工具后,新建项目,看到有提示quickstart的时候选择是,进入开发界面后,会出现如下的代码结构,
如果没有出现,则从官网文档上,下载一份源码:https://mp.weixin.qq.com/debug/wxadoc/dev/demo/quickstart.zip?t=2017112
对于这个结构 我们先简单的看一下,
1.app.js
app.js里声明了一个App应用,其中onLauch方法为其生命周期钟的方法:另外的三个方法就是 onShow,onHide,onError..分别在app加载,显示,隐藏和错误时触发。
在app.js中给App声明的方法,在全局中都可以访问,访问的方法是:
varapp=getApp();app.getUserInfo(func);//调用App里面的getUserInfo方法
2.app.json
这个文件用于配置整个应用的属性,比如窗口的属性,应用中的路由页面配置,导航条navbar,tabBar,networkTimeout,debug等配置。下面简单说下该配置里的参数:
01.pages
该参数是一个数组,放置所有的路由页面,
第一项被默认为起始页
02.window
该参数配置背景色,背景文字样式,导航条的背景色,导航条的文字颜色
03.tabBar
该参数可以配置tab按钮的样式,在不配置的时候是不显示的。
11.list:数组,里面配置每个tabBar文字,图标的样式,和路由路径
参数为:pagePath,text,iconPath,selectedIconPath
12.position:tabBar的位置,bottom/top
13.backgroundColor:背景色
14.color:文字颜色
15.selectedIconPath:选中的图标颜色
04.networkTimeout
对象类型:比如:request:10000
05.debug:true/false
3.app.wxss
定义全局的样式特征,里面定义的样式整个app都可以访问。
4.pages文件夹
里面放置所有的页面,当然你想放在其他地方,最好遵循标准命名规范
5.utils
放置公共的组件,组件引用遵循amd规范,可以使用commonJS规范,也可以使用es6规范,但是对于es6的解构引入,现在在微信小程序的js里还不支持。
6.简单的体验
修改pages/index/index.js钟的data参数里的motto字段的值,点下保存,会发现左侧的界面变随着更新。
然后尝试着在data里添加字段,然后在前台绑定
data: { motto:'欢迎来到微信小程序', userInfo: {}, logo:'语巷'},
index.wxml
{{logo}}{{motto}}
效果:
到这里为止,我们已经知道了data的作用了
原文链接:http://www.moguiweb.com.cn/article/detail/587b15bf4981030efc96ff92