小程序入门教程

1. 微信小程序介绍

只能通过微信APP, 扫码/点击链接, 进入的特殊"网页"的集合.
无需下载安装包(扫码直用)

2. 移动端应用分类

H5APP: 使用传统WEB技术(H5+CSS3+JS), 在浏览器中运行的网页
小程序: 使用自家开发技术栈研发的小应用, 只能在特定APP中扫码/点击打开(微信小程序, 支付宝小程序)
原生APP: 需要下载安装包, 安装才能使用, 区分IOS/ANDROID ! 安装包不互通

3. 小程序的开发流程

3.1 注册小程序开发者账号
https://mp.weixin.qq.com/
3.2 下载小程序专用开发IDE-微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.3 通过微信开发者工具, 新建项目
每次创建项目需要填写自己的小程序AppID

4. 小程序的核心目录

(重要)pages -- 小程序所有核心页面
utils -- 工具文件夹
.eslintrc.js -- eslint语法检测配置文件
app.js -- 入口js文件
app.json -- 全局配置
app.wxss -- 全局样式
project.config.json -- 工程配置1
project.private.config.json -- 工程配置2
sitemap.json -- 其他描述

5. 小程序的页面结构

小程序并非HTML, 所以有一套自己的开发模式和文件类型
.js -- 页面的逻辑
.json -- 页面的配置
.wxml -- 页面的结构
.wxss -- 页面的样式

6. 小程序独有常用标签

navigator: 超链接, 允许跳转到小程序的任意页面
view: 容器!! ===div
text: 文本 ===span
swiper: 轮播组件
swiper-item: 轮播的儿子
例:

<swiper>
   <swiper-item>元素1</swiper-item>
   <swiper-item>元素2</swiper-item>
..
</swiper>

• button: 按钮
• input: 输入框
• image: 图片
• icon: 系统送的图标
• scroll-view: 可以滚动的view容器
• map: 地图

7. 小程序的事件

小程序只有两种事件: 冒泡(bind), 非冒泡(catch)

事件类型:

• tap: 触摸
• longpress: 长按(0.35s)
• touchstart: 触摸开始
• touchend: 触摸结束
• touchmove: 触摸后开始移动

• touchcancel: 触摸后被系统弹窗/电话等打断

  绑定方式: bindtap冒泡触摸 catchtap非冒泡触摸

8. 小程序的数据驱动

8.1 把要变化的数据放入data中

data: {
name: 'zhangsan'
}

8.2 使用mustauche获取动态数据, 小程序不区分内容还是属性, 都是用{{}}获取

<view name="{{ test }}">测试{{ aa }}</view>

8.3 修改数据

this.setData({
//key要修改的key名: value新的值
name: 'lisi'
})

9. 小程序其他

底部 tabBar
自定义头部导航 navigationStyle
获取胶囊坐标 wx.getMenuButtonBoundingClientRect()