微信小程序一
1. 学前准备
- 工具
- 微信开发者工具
- 微信小程序账号
- 前置知识
- html、css基础知识
- js基础知识
学习主题
- 小程序简介
- 小程序环境
- 小程序页面
- 事件系统
- 模板引用
- 网络请求
- 新闻列表案例
2. 学习目标
- 掌握小程序环境搭建
- 了解组件及自定义组件
- 会使用模板引用及组件
- 会在小程序使用网络请求
1.1 什么是小程序?
”触手可及“、”即用即走“,无需下载安装,不用关心安装过多应用;
- 整个小程序所有分包大小不超过 8M
- 单个分包/主包大小不能超过 2M
1.2小程序优点
- 平台封闭,上手简单
- 跨平台运行
- 使用方便
1.3 小程序环境
1.4 初始化项目
- 新建项目
- 扫码登录
- 开发工具
- 切后台
- sensor 用来调试地理位置调式重力感应的api
- 目录结构
- app.json
- 全局的公共配置:是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
- app.wxss
- 小程序公共样式表
- app.js
- 小程序逻辑
- project.config.json
- 记录开发者工具配置信息例如界面颜色、编译配置等等
- sitemap.json
- 配置小程序页面是否被微信索引;
- app.json
1.5 小程序页面
- js :页面逻辑
- wxml:页面结构
- json:页面配置
- wxss: 页面样式
1.6 小程序单位
-
相关单位
- pt逻辑分辨率(视觉单位,和屏幕尺寸有关系);
- px物理分辨率(像素点)
- ppi:每英寸包含的像素点
-
小程序单位换算关系
- iphone6下1px=1rpx=0.5pt(rpx会在不同设备下转换、而px不会);
1.7 组件
-
image组件
-
button组件
-
https://openai.weixin.qq.com/
-
文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
1.8 导航栏配置
-
app.json
- pages:配置小程序页面路径
- window 配置顶部导航栏 文档地址
{ "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } }
-
tabbar配置底部导航栏
"tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" } ] },
-
路由跳转
- wx.switchTap:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
- wx.navigateTo:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
- wx.redirectTo:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
- wx.reLaunch:关闭所有页面,打开到应用内的某个页面
1.9 事件绑定
- bindtap 和 catchtap:catch 会阻止冒泡
- dataset 带参数
- 事件中布尔值
模板引用
提高模板复用性;
-
定义模板
<template name="A"> <text> A template </text> </template>
-
引入模板
-
Import 可以在该文件中使用目标文件定义的
template
<import src="/pages/templates/a.wxml" />
<template is="a"></template>
include
可以将目标文件除了template
外的整个代码引入,相当于是拷贝到include
位置
<include src="/pages/templates/b.wxml" />
网络请求
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
1.12 新闻列表
- 获取新闻列表
- 上拉加载更多
- 新闻列表详细
练习:1.完善新闻详细页面 2.上拉加载更多;
3. 总结
- 小程序简介
- 小程序环境
- 小程序页面
- 事件系统
- 模板引用
- 网络请求
4. 下节预告
小程序基础二