微信小程序开发入门(二)——Hello World

安装好开发工具后,新建项目,看到有提示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

推荐阅读更多精彩内容