第三章 开发第一个小程序

3.2 开发投票小程序的首页

3.2.1 小程序的初始配置

在微信开发工具创建小程序项目后，

app.js中加入注册小程序的逻辑：

App({

  onLaunch() { //生命周期函数，小程序打开时执行一次

    }

})

app.json中：

{"pages":["pages/index/index"}}

在/pages/index/index.js中加入页面注册：

Page({onLoad() {//页面生命周期函数，进入页面时会调用它}})

/pages/index/index.json加入一个空的配置：

{}

加入以上代码，页面就有了，并且可以在模拟器正常运行。给小程序加上内容。

/pages/index/index.wxml加view组件：

<view class="container">

</view>

app.json加 如小程序导航栏的设置：

{  "pages":["pages/index/index"],"window":{    "backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"投票小程序","navigationBarTextStyle":"black"}}

json文件不支持加注释

app.wxss中加入小程序的全局样式：

/**app.wxss**/page {height:100%;}.container{height:100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding:200rpx0;box-sizing: border-box;}

wxnl代码没有page组件，但微信小程序会把它加在每个页面的最外层。

对页面进行单独的配置，修改index.json文件的内容：

{  "navigationBarTitleText":"投票小程序--首页"}

最终设置了导航栏的小程序首页如下 ：