03.知识扩展

1.0 小程序中的编程式导航

• 导航
  • 声明式导航
    • vue：
    • 小程序：
  • 编程式导航
    • vue
      • this.$router.push()
    • 小程序
      • wx.navigateTo({ url: ‘’ })
• wx
  • 它在小程序中的作用相当于是 js 中的 window 对象

2.0 小程序中事件的传参

• 传参：

  -- main.wxml
  <view bindtap="fn" data-name="xjj"></view>
  

• 接收

  -- main.js
  Page({
  	fn(event) {
  		let name = event.currentTarget.dataset.name;
  	}
  })
  

3.0 编译模式的设置方式

• 工具栏中的普通编译

  • 添加编译模式

    ​

完成 lol 案例

3.0 创建项目结构

• 准备工作
  • 静态页面
  • 页面数据
• 创建项目

4.0 完成英雄页面

• 完成静态页面
  • 结构
  • 样式
• 动态渲染数据
  • 将 js 文件中的数据进行渲染
• 完成页面中导航区域的表现
  • 内容
    • 背景颜色
      • navigationBarBackgroundColor
    • 标题
      • navigationBarTitleText
    • 文本颜色
      • navigationBarTextStyle

5.0 完成英雄详情

• 添加一个详情页面
  • 给详情页面设置一个入口
  • 创建一个详情页面
• 完成静态页面
  • 结构
  • 样式
• 动态渲染数据
  • 得到所有的详情数据
  • 根据页面上的id从数据中得到具体数据
  • 渲染到页面上
• 修改详情页面的表现
  • 背景颜色
  • 文本
  • 文本颜色
• 动态设置导航标题
  • wx.setNavigationBarTitle()

小程序的发布上线

6.0 发布流程

• 步骤
  • 开发者工具
    • 将小程序的源代码提交到微信的服务器中
      • 上传
        • 按照提示完成代码的设置
  • 小程序后台管理
    • 提交审核
• 前置工作：
  • 完善当前小程序帐号的信息