小程序开发和学习
一、小程序概念
注:为了更好的学习小程序,建议先学习一下vue的基础再来,支持es6语法,借鉴vue和react(把所有刷新数据的东西给程序员做)。
1.小程序是什么?
它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用。
2.小程序自己总结
- 不是HTML5
- 用即走,随手可得
- 拥有离线能力
- 一次开发,多端兼容
- 依赖微信客户端中(大树底下好乘凉)
3.小程序与传统App区别
小程序:
局限性:必须依赖于微信,不能独立运行。
优势:不需要考虚兼容问题,安装的问题,开发难度小。
传统app(这个兼容性真的恶心):
优势:独立运行,不需要依赖于谁,可以适合所有的业务需求
局限性:需要用户安装,解决适配(开发兼容问题),开发难度大
4.小程序框架结构(mvvm)
二、申请账号与登录设置
https://mp.weixin.qq.com/
三、开发工具
1.工具介绍
为了帮助开发者简单和高效地开发和调试微信小程序,推出了小程序开发者工具,集成了公众号网页调试和小程序开发与调试两种开发模式。
2.下载安装
直达:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.vscode中小程序插件安装
4.第一个小程序helloworld
项目创建完毕
5.工具相关介绍
dpr3概念:
我简单说明一下,比如原本pc上一个像素代表一个点
dpr3则代表则代表 3x3=9个像素代表一个点
所以 pc上1px 在 手机上dpr2 则 手机上是表示1x2 = 2 px
1px 在 dpr3 则代表 3px
四、小程序的文件结构及配置
1.文件结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 pages。
一个小程序主体部分由三个文件组成,必须放在项目的根目录
文件 | 必须 | 作用 |
---|---|---|
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共设置 |
app.wxss | 否 | 小程序公共样式表 |
一个小程序page页面由四个文件组成
文件类型 | 必须 | 作用 |
---|---|---|
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
wxss | 否 | 页面样式表 |
json | 否 | 页面配置 |
json:非必须的可以集成父类的,wxss :非必须的大不了不美化嘛
2.app.js文件的详解
地址:
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
app.json 文件用来对微信小程序进行全局配置,决定小程序,页面数量、窗口表现、设置网络超时时间、设置底部或顶部菜单等等。
注意(要求及其严格):
app.json中不能添加任何注释,key和value字符串必须用双引号引起来,数组或对象最后一位不能有逗号。
(1).app.json 配置项列表
上面我们也看到了,配置项非常多,我们这里跳几个重点,也是平常用的最多的来分别学习
属性 | 类型 | 必须 | 描述 |
---|---|---|---|
pages | String Array | 是 | 设置页面路径 |
window | Object | 否 | 设置默认页面的窗口表现 |
tabBar | Object | 否 | 设置底部或顶部菜单 |
networkTimeout | Object | 否 | 设置网络超时时间 |
(2).pages
指定小程序由哪些页面组成。每一项代表对应页面【路径+目录名+文件名(不包含后缀名)】,数组的第一项代表小程序的初始页面(首页/展示页)。小程序中新增/减少页面,都需要对 pages 数组进行修改(变了就要修改)。
(3).window
官方文档,介绍
脑海里现在记住一张图
看演示
下拉刷新三组合
(4).tabBar
设置底部菜单或者顶部菜单
注意点:
当设置 position 为 top 时,将不会显示 icon图标
tabBar 中的 list 是一个数组,只能配置最少2个、最多5个菜单
问题?那我就想搞6个菜单或者7个怎么办呢?
要么你和产品说小程序规定,最多只能5个,超过我实现不了,要么。自己写一个底部菜单。不用官方这个就行了。。
tabbar官方文档中的参数特别多,要一个一个复制特别辛苦,所以前面让vscode安装的插件就起作用。
我们用vscode打开项目,输入tab后就有提示了
效果展示:
代码:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"enablePullDownRefresh":true,
"backgroundColor":"#cccccc",
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#0188fb",
"navigationBarTitleText": "共享xx",
"navigationBarTextStyle":"white"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"tabBar": {
"color": "#000",
"selectedColor": "#f00",
"backgroundColor": "#fff",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/icon/icon_home@3x.png",
"selectedIconPath": "/icon/icon_home_active@3x.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "/icon/icon_me@3x.png",
"selectedIconPath": "/icon/icon_me_active@3x.png"
}
]
}
}
(5).networkTimeout
(6).networkTimeout
五、生命周期
由框架自己触发的一系统事件函数。有什么作用??了解后,可以知道什么时候从api取数据,才不会有问题,什么时候做什么事最合适。
地址
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
脑海里可以尝试记忆一下这张图,页面 Page 实例的生命周期
1.几个生命周期方法的简单介绍
(1).onLoad(1)
页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
(2).onShow(多)
页面显示/切入前台时触发。一个页面可以触发很多次。
(3).onReady(1)
页面初次渲染完成时触发。一个页面只会调用一次。
(4).onHide(多)
页面隐藏/切入后台时触发。一个页面可以触发多次
2.生命周期的完整流程查看
切换后台,则会触发页面隐藏事件
2.查看js文件
新建一个页面
查看结构,默认是全部的方法都给你写了。
一般我们用不到那么多,我们可以只留下一个load
事件就可以了
六、视图结构 wxml
1.wxml概述
HTML 是用来描述当前这个页面的结构,同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。
小程序提倡把渲染和逻辑分离,简单来说就是不要再让 JS 直接操控 DOM,JS只需要负责数据的处理,然后再通过一种模板语法来进行界面结构展示。
在视图层中通过 **{ {}}**语法把一个变量绑定到视图界面上,称为数据绑定
当然仅仅通过数据绑定还不够的,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。wx:if wx:for
2.数据绑定
(1).简单数据的绑定
(2).对象数据的绑定
3.数据更新
#一定要手动触发
this.setData({
key:value})
实现2秒后更新数据
代码
Page({
/**
* 页面的初始数据
*/
data: {
name:'hellworld'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//页面加载2秒后,更改data中 name的值
//
// var _this = this;
// setTimeout(function(){
// _this.setData({
// name:'php'
// });
// },2000);
//
setTimeout(() =>