微信小程序实战01

电影周周看

覆盖的小程序技术
小程序的整体架构和运行原理
常用组件的使用（view,text,image,navigator,swiper）
配置详解
数据绑定（包括条件渲染，列表渲染等）
事件机制
页面生命周期
导航API
网络请求API

创建项目

小程序文件结构
一个整体描述的app
app.js 小程序逻辑
app.json 小程序公共设置
app.wxss 小程序公共样式
描述各个页面的page
js 页面逻辑
wxml 页面结构
wxss 页面样式表
json 页面配置

所有wxml标签都是双标签
view类似div

顶部导航栏配置

  "navigationBarTitleText":"关于00000",
"navigationBarBackgroundColor":"#fff",
"navigationBarTextStyle":"whilte"

响应式长度单位rpx
相对于屏幕大小的单位（把所有设备屏幕都设为750）

使用navigator跳转页面
hover-class=“nav"可以用于鼠标点击时变色
url=”/pages/weekly/weekly"跳转链接
open-type='navigate’是否可返回

text内容必须包含纯文本

配置tabBar

标签栏
对若干一级页面的入口链接
全局配置app.json
在app.json中配置tabBar
“tabBar”: {
“list”:[
{ //每一个代表底部按钮
“text”:“每周推荐”, //显示的文本内容
“pagePath”:“pages/weekly/weekly”, //对应页面内容
“iconPath”:“image/button.png”, //未选中显示的图片
“selectedIconPath”:“image/play.jpg” //选中显示的图片
},
{
“text”: “关于”,
“pagePath”: “pages/about/about”,
“iconPath”: “image/开始.png”,
“selectedIconPath”: “image/play.jpg”
}
],
“color”:"#040", //字体颜色
“selectedColor”:"#f40" //选择时的颜色
}
配置全局的导航栏样式
在app.json中配置Windows属性
“window”: {
“navigationBarBackgroundColor”: “#fff”, //背景颜色
“navigationBarTextStyle”: “black”, //字体颜色
“navigationBarTitleText”: “小程序”, //默认字体
“backgroundColor”: “#eeeeee”,
“backgroundTextStyle”: “light”,
“enablePullDownRefresh”: false
}