《微信小程序开发从入门到实战》学习十二

第三章 开发第一个小程序

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组件：

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: 200rpx 0;
  box-sizing: border-box;
} 

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

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

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

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