初始化项目
- 新建项目
- 扫码登录
- 开发工具
- 切后台
- sensor 用来调试地理位置调式重力感应的api
- 目录结构
- app.json
- 全局的公共配置:是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
- app.wxss
- 小程序公共样式表
- app.js
- 小程序逻辑
- project.config.json
- 记录开发者工具配置信息例如界面颜色、编译配置等等
- sitemap.json
- 配置小程序页面是否被微信索引;
- app.json
###小程序页面
- js :页面逻辑
- wxml:页面结构
- json:页面配置
- wxss: 页面样式
小程序单位
-
相关单位
- pt逻辑分辨率(视觉单位,和屏幕尺寸有关系);
- px物理分辨率(像素点)
- ppi:每英寸包含的像素点
-
小程序单位换算关系
- iphone6下1px=1rpx=0.5pt(rpx会在不同设备下转换、而px不会);
组件
-
image组件
-
button组件
-
https://openai.weixin.qq.com/
-
文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
导航栏配置
-
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.switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
- wx.navigateTo:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
- wx.redirectTo:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
- wx.reLaunch:关闭所有页面,打开到应用内的某个页面
事件绑定
- bindtap 和 catchtap:catch 会阻止冒泡
- dataset 带参数
- 事件中布尔值
模板引用
提高模板复用性;
-
定义模板
<template name="A"> <text> A template </text> </template>
-
引入模板
-
Import 可以在该文件中使用目标文件定义的
template
-
include
可以将目标文件除了template
外的整个代码引入,相当于是拷贝到include
位置
-
网络请求
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
新闻列表
- 获取新闻列表
- 上拉加载更多
- 新闻列表详细
练习:1.完善新闻详细页面 2.上拉加载更多;
总结
- 小程序简介
- 小程序环境
- 小程序页面
- 事件系统
- 模板引用
- 网络请求