用开发者工具在本地创建了一个小程序,默认里面会有一些演示代码 .. 它就是一个基本的小程序 .. 小程序的主体部分主要有三个文件 .... app.js,app.json 还有一个 app.wxss .. 这几个文件要在小程序的根目录的下面 ..
app.js 是小程序的主要的逻辑代码 .. 先打开它看一下 ... 这里面使用了 App ,注册了一个小程序 .. 注册的时候给它一个对象 .. 里面可以放一些东西 ..
比如这个 onLaunch,它是小程序的一个生命周期函数 .. 这个 onLaunch 会在小程序初始化以后被调用 .. 我们可以把要在这个阶段做的事儿放在这个函数里面 ..
下面这个 getUserInfo 是个自定义的方法 .. globalData 是个数据对象 ..
这个 getUserInfo 方法可以在小程序的其它地方用到 .. 它做的事主要就是去得到用户相关的信息 .. 这里用了小程序提供的接口,getUserInfo ..
小程序还提供了一些接口,可以上传文件,得到用户的位置,用户设备相关的信息,可以用微信登录,还有支付功能等等 ...
这里用 getUserInfo 这个接口得到了用户相关的信息以后,会把信息放到一个全局数据对象里面,就是下面这个 globalData 里的 userInfo ..
app.json
app.json 是小程序的全局配置 .. 你可以在这个文件说明一下小程序里的页面,窗口的样式,还有标签等等 .. 比如这里就用了 pages ,说明了一下小程序里的页面 .. 这里有两个页面,一个是 index ,一个 logs ..
window 里面设置了窗口的一些样式 .. 看这些配置的名字,你应该能知道具体表示的是什么 .. backgroundTextStyle ,是跟文字相关的样式 .. light 是设置的值 ..
navigationBarBackgroundColor ,指的是导航栏的背景颜色 .. 现在导航栏的背景是白色 ..
navigationBarTitleText .. 是导航栏上的文字 .. 现在是 WeChat .. 改一下这个文字 .. 比如 ninghao.net .. 你会看到,现在小程序首页的导航栏上的文字就变成了 ninghao.net ..
app.wxss
再看一下 app.wxss,这种 wxss 后缀的文件里面的东西就是小程序用的样式 .. wx 是微信,ss 表示 style sheet .. 它跟我们平时用的 css 差不多 ..
这个样式文件里,给 .container 这个类定义了样式 .. 里面用了一些 flexbox 样式属性,宁皓网有 flexbox 相关的课程,你可以先看一下 ...
这里定义的样式,你可以在小程序的页面上用到 .. 比如在小程序的首页上就用到了这个样式 .. 可以先验证一下 .. 添加一个新的样式属性 .. background .. 把背景颜色设置成 #f8f8f8 .. 你会发现首页上某块区域的背景颜色会有变化 ..