02.第一个微信小程序

5.0 创建第一个小程序

• 步骤：
  • 打开微信开发者工具
  • 使用微信扫码登录
  • 点击小程序-创建小程序
    • 项目名
    • 项目路径
    • appid
    • 不使用云服务器
    • 语言： javascript

6.0 开发工具的组成

• 菜单栏
• 工具栏
  • 预览
  • 描述二维码
    • 自动预览
  • 切后台
• 模拟器
• 编译器
• 调试器

7.0 项目结构

• 对比：

  • web页面：
    • 技术栈：
      • html
        • 从语义化的角度来描述页面结构
      • css
        • 从审美的角度来美化页面
      • js
        • 从交互的角度来提升用户体验
  • 小程序页面
    • 技术栈：
      • wxml
        • 描述微信页面的结构
      • wxss
        • 描述微信页面的样式
      • js
        • 书写微信的逻辑代码
      • json
        • 配置页面的相关信息

• 组成

  • pages：管理当前小程序中所有的页面

    • index

      • index.wml

      • index.js

        • 注意点：

          • 所有的代码都是写在

            Page({
              
            })
            

      • index.wxss

      • index.json

        • 注意点：
          • 如果没有内容，必须添加一个空对象

  • app.json：注册小程序中的页面

• 小技术

  • 快速创建一个页面
    • 在 app.json 中的 pages 下添加一个路径，直接保存，可以自动生成对应的页面
  • 设置项目的默认首页
    • 在 app.json 中的 pages 将路径移到第一个元素中

开发小程序 — 页面操作

8.0 页面设置

• 创建页面
• 设置为启动项

9.0 页面操作

• 书写 wxml
  • 对比：
    • html:
      • wxml 与 html 一样都是用来决定页面的结构
      • html 中的使用标签来描述页面结构
      • wxml 中不能识别标签，只能识别组件
  • 组件：
    • wxml 中的组件的作用与 html 中标签的作用一样
    • 内容：
      • view
        • 视图容器
      • image
        • 图片
      • …
• 书写 wxss
  • 对比：
    • 与法与 css 基本一致

案例：商品介绍

开发小程序 — 数据操作

10.0 数据绑定

• 步骤：

  • 在 js 文件中的 data 中定义一个数据

    -- main.js
    Page({
    	data: {
    		imgList: ['1', '2']
    	}
    })
    

    ​

  • 在 wxml 通过 {{}} 的方式显示

    -- main.wxml
    <view>
    	<image src="{{imgList[0]}}"></image>
    </view>
    

    ​

11.0 事件绑定

• 步骤：

  • 在 wxml 中通过 bind 关键字绑定事件

    -- main.wxml
    <button bindtap="fn"></button>
    

  • 在 js 中实现这个事件

    -- main.js
    Page({
      data: {},
      fn() {
        console.log('我是fn')
      }
    })
    

    ​

12.0 数据更新

• 在方法中取得 js 中 data 下面的数据

  -- main.js
  Page({
    data: { num: 0 },
    fn() {
  	this.data.num	
    }
  })
  

• 在方法中修改 js 中data下面的数据

  -- main.js
  Page({
  	data: { num: 0 },
  	fn () {
  		this.setData({
  			num: this.data.num + 1
  		})
  	}
  })
  

  ​

案例：图片切换

案例：轮播图实现

• 步骤：
  • 创建一个小程序页面
  • 完成结构与样式
  • 使用 swiper 添加一个轮播图

13.0 列表渲染

• wx:for & wx:key

  • 作用：用来遍历数据源

  • 语法：

    <view wx:for="{{imgList}}" wx:key="{{ index }}">
    	<view> {{item}} {{ index }} </view>
    </view>
    

• block

  • 作用：只在代码书写阶段起作用，代码运行起来以后会被干掉

14.0 模块化

• 目标：
  • 将轮播图中的数据单独提取到一个 js 文件中
• 支持 commonjs 规范
  • 导出： module.exports
  • 导入： require(’’)

15.0 页面跳转

• 目标：
  • 在一个页面中有一个导航
  • 点击以后会跳转到另一个页面中
• navigator 组件
  • 从一个页面跳转到另一个页面
  • 声明式导航
• 导航
  • 声明式导航
    • 通过标签来进跳转:
  • 编程式导航
    • 通过书写js代码来进行跳转: window.location = “www.baidu.com”

16.0 参数的传递

• 传参：

• 接收参数

  Page({
    onLoad(options){
  	console.log(options.name)
    }
  })
  

案例：克鲁赛德战记数据渲染

• 1.0 项目的创建

• 2.0 创建一个首页

  • 2.1 完成静态页面
    • 结构
    • 样式
  • 2.2 动态渲染数据
  • 2.3 给每个元素添加一个导航，跳转到另一个页面：详情页面

• 3.0 添加详情页面

  • 3.1 完成静态页面

    • 结构
    • 样式

    ​