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 完成静态页面
  - 结构
  - 样式

02.第一个微信小程序相关推荐

多平台多渠道账号体系绑定第一篇-微信小程序篇
先奉上本篇实现效果多平台多渠道账号体系绑定第一篇-微信小程序篇近来,在对接三方平台时,欲将多方开放平台统一整合入笔者的框架内. 如下为大致思路设计图由于需对接多方平台关联账号体系,思来之后,将设 ...
微信小程序开发与应用第一章微信小程序的基本知识1
1-1 第一章第一节微信小程序的基本知识1 文章目录前言一.注册一个小程序账号二.第一个微信小程序"Hello Wechat!" (一)准备工作 (二)页面介绍 (三)代 ...
微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
第一天,认识微信小程序,第一个微信小程序 1.什么是微信小程序? 是h5网页嘛?不是微信张小龙说: 小程序是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用 ...
新手尝试编写微信小程序（1）——我的第一个微信小程序
微信小程序风靡全国已经好多年了,首先是微信小程序,后面百度等多个平台都发布了自己的小程序了,可我还从未尝试过开发一个玩玩,其实对于一个程序员而言,开发一个小程序实在不是什么难事情,所以今天就要聊此心愿 ...
《移动软件开发》实验1：第一个微信小程序实验报告
2022年夏季<移动软件开发>实验报告本实验报告所参考实验文档为:Docs (feishu.cn) 如想获得详细的制作过程,请点击上面链接.该博客仅为个人使用实验报告姓名和学号? / ...
微信小程序开发笔记（二）第一个微信小程序
参考教材:<微信小程序开发入门与实践> 雷磊前置知识:JavaScript,CSS 新建项目安装好微信开发者工具后,我们就可以开始新建我们第一个微信小程序了. 选择新建项目,填入一个项 ...
《移动软件开发》实验一：第一个微信小程序
2022年夏季<移动软件开发>实验一:第一个微信小程序一.实验目标 1.学习使用快速启动模板创建小程序的方法:2.学习不使用模板手动创建小程序的方法. 二.实验步骤 1.自动生成小程序 ...
普本在校生是如何零基础在一个月内开发出第一款微信小程序的
先自我介绍一下,我是一个普通本科的大三在读生,在2020年春节前后,自己一个人开发并上线了第一款微信小程序,后续陆续开发了N款小程序,并且自己通过毕设.课设的开发在2020年上半年的疫情期间挣了一万多 ...
启动第一个微信小程序（一）
参考源码:https://pan.baidu.com/s/17y6r44hrocXVjnPBVgJd5g 提取码:fk83 接口档案:https://www.showdoc.cc/1287197394 ...

02.第一个微信小程序

5.0 创建第一个小程序

6.0 开发工具的组成

7.0 项目结构

开发小程序 — 页面操作

8.0 页面设置

9.0 页面操作

案例：商品介绍

开发小程序 — 数据操作

10.0 数据绑定

11.0 事件绑定

12.0 数据更新

案例：图片切换

案例：轮播图实现

13.0 列表渲染

14.0 模块化

15.0 页面跳转

16.0 参数的传递

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

02.第一个微信小程序相关推荐

最新文章

热门文章