1 微信小程序简介

1.1 什么是微信小程序

（1）2017年1月9日，微信推出的“小程序”正式上线。“小程序”是一种无需安装，即可使用的手机“应用”。不需要像往常一样下载App，用户在微信中“用完即走”。
（2）小程序的本质是Web App.Web App就是一种通过H5页面技术实现的，和Native App的功能和界面几乎一样的手机App形态。

1.2 微信小程序的功能

（1）线下扫码
（2）对话分享
（3）关联公众号
（4）搜索查找
（5）基于地理位置推荐

1.3 微信小程序的特点

（1）背靠海量用户易于推广传播
（2）免安装、便于分享
（3）跨平台、免适配
（4）提供常用视图组件
（5）具有丰富的API接口
（6）即时预览、快速更新迭代

2 准备工作

2.1 账号、AppID

2.1.1 注册小程序账号

（1）在微信公众平台官网首页（https://mp.weixin.qq.com）点击右上角的“立即注册”按钮
（2）选择“小程序”
（3）填写基本信息进行注册，注意邮箱要求：没注册过公众号、开放平台及绑定个人微信的邮箱
（4）进行邮箱激活
（5）进行信息登记，个人开发者选择“个人”即可
（6）填写完信息后，用微信扫描二维码，扫描者将称为管理员
（7）信息提交成功后前往小程序管理页面

2.1.2 APPID

小程序的 AppID 相当于小程序平台的一个身份证，拥有AppID可以预览测试及发布小程序，以及更多开发权限。
在小程序管理界面找到【设置】-【开发设置】，可以看到AppID,由于新建项目时会经常用到AppID，建议将AppID保存到方便访问的笔记里，并注意保密。

2.2 开发者工具

开发工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=201842

下载并安装该开发者工具后，需扫描登陆

登陆后进入主界面

点击“+”，创建项目。填写项目名称、目录、APPID，开发模式选择默认“小程序”。

点击“新建”按钮，进入如下工作界面

开发者工具界面主要分四部分：
【工具栏】用于切换视图、编译预览等功能
【模拟器】用于切换机型和网络等，模拟在手机上的状态
【编辑器】包含文件目录和编码区，是主要开发部分
【调试器】功能和Chrome基本相近，用于调试小程序代码。

2.3 后缀名介绍

*.json JSON配置文件通常用于小程序或者页面的配置选项
*.wxml WXML 模板文件可以理解为小程序的HTML，用于放小程序的视图组件
*.wxss WXSS 样式文件可以理解为小程序的CSS，用于决定组件和页面的样式
*.js JS 脚本逻辑文件用于小程序的事件以及其他逻辑交互

2.4 配置

2.4.1 工具配置

(1)project.config.json 开发者工具配置，包括基础库版本、AppId、是否es6转es5等，具体配置可查看小程序官网项目配置文件
(2)utils.js 常用工具函数，例如日期格式化

2.4.2 APP配置

(1)app.wxss 全局样式
(2)app.json 全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等，具体配置选项：小程序的配置app.json。
是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。
(3)app.js 用于注册小程序函数，管理生命周期和全局数据

2.4.2.1 page属性

用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
接收一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增、减少页面，都需要对pages数组进行修改。
文件名不需要写文件后缀，因为框架会自动去寻找路径下.json、.js、.wxml、wxss四个文件进行整合。

2.4.2.2 创建视图的两种方式

方法一：在文件目录中创建，然后在app.json文件中的pages属性中注册该页面。

方法二：直接在app.json文件中的pages属性中进行注册，工具会根据路径自动创建对应的文件夹及视图

2.4.3页面结构

(1)index.wxml 页面模板
(2)index.wxss 页面样式，可覆盖全局样式
(3)index.js 生成APP实例，注册页面，该页面初始数据、生命周期、事件处理函数等
(4)index.json 页面配置，可以覆盖app.json，具体配置项：page.json

2.5 开发工具快捷键

shift+ctrl+n 新建项目
shift+ctrl+w 关闭当前项目

ctrl+n 新建文件
ctrl+s 保存文件
ctrl+w 关闭当前文件

ctrl+z 撤销
ctrl+c 复制
ctrl+x 剪切
ctrl+v 粘贴

ctrl+[ 代码左缩进
ctrl+] 代码右缩进

alt+上箭头代码上移一行
alt+下箭头代码下移一行
shift+alt+上箭头复制并向上粘贴
shift+alt+下箭头复制并向下粘贴

ctrl+f 文件内搜索

2.6 bug分析

出现以上bug,检查app.json是否存在以及是否在正确的目录下。

3 快速开发基础

3.1视图基础

3.2 数据绑定

3.3 视图渲染

3.4 时间处理

3.5 常见配置

3.6 app.json之window

3.7 app.js之tabBar

3.8 app.js之App方法

3.8 app.js之Page方法

3.9 模板

3.10 引用其他页面文件

3.11 页面事件

3.12 事件对象

3.13 页面样式文件Wxss

4 开发堪比原生的UI界面

4.1 认识组件

4.2 view组件

4.3 button组件

wxml代码如下：


<view class="container"><button plain="true">按钮</button><button size="mini" plain="true">按钮</button><button size="default" type="warn" plain="true">按钮</button><button size="default" type="primary" disabled="true" plain="true">按钮</button><button size="default" type="primary" loading="true" plain="true">按钮</button>
</view>

运行结果如下：

button按钮属性说明如下：

4.4 input组件

4.5 input组件

4.6 案例一

4.7 案例二之成绩统计

4.8 icon组件

4.9 slider组件

4.10 icon之阿里矢量图标

4.11 案例：计算器

5 小程序es6

6 表单组件

6.1 switch组件

6.2 radio组件

6.3 checkbox组件

6.4 label组件

6.5 textarea组件

6.6 Form组件

6.7 Picker组件

6.8Picker-view组件

6.9 案例：省市区信息选择

6.10 navigator组件

6.11 swiper组件

7 交互反馈和多媒体组件

7.1 wx.showLoding

7.2 wx.showModal

7.3 底部弹出栏

7.4 audio组件

7.5 音乐播放接口函数

7.6 video组件

7.7 video组件之接口函数

7.8 image组件

7.9 canvas组件

8 数据储存及后台交互

8.1 同步缓存

8.2 缓存多条记录

8.3 异步缓存

8.4 网络请求

8.5 调用接口

8.6 引入外部js

8.7 封装接口网址

8.8 界面布置

8.9 数据请求

8.10 案例详情实现

8.11 接口参数详解

8.12 上拉加载

8.13 scroll-view组件

9 使用手机设备

9.1 选择图片

9.2 saveFile

9.3 预览图片

9.4 授权相关

9.5 保存图片

9.6 录音

9.7 播放录音

9.8 获取系统信息

9.9 获取网络状态

9.10 获取地理位置

10 综合案例：QQ音乐

10.1 推荐页布局

10.2 排行榜

10.3 JSON.parse采坑

10.4 解码数据并布局

10.5 搜索页

10.6 手写showToast

10.7 关闭提示

10.8 展示数据

10.9 缓存历史

10.10 历史页的完善

11 案例：商城

11.1 注册页

11.2 发送验证码配置

11.3 发送验证码

11.4 验证码最后完善

11.5 首页布局

11.6 页面布局

11.7 搜索功能实现

11.8 传递到详情页

11.9 倒计时

11.10 为轮播图添加事件

11.11 配置tabBar

12 案例：微信小游戏

12.1 新建项目

12.2 three.js简介

12.3 three.js的下载及引入

13 View组件和flexbox弹性盒布局

1 事件

1.1 什么是事件

1、事件是视图层到逻辑层的通讯方式。
2、事件可以将用户的行为反馈到逻辑层进行处理。
3、事件可以绑定在组件上，当达到触发事件，就会执行逻辑*中对应的事件处理函数。
4、事件对象可以携带额外信息，如id,dataset,touches。

1.2 事件的使用方式

在组件中绑定一个事件处理函数，如bingtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
.wxml代码如下：


<view class="container"><view>{{clickMsg}}</view><view id="viewId0" data-hi="dataHi0" data-qf="data-qf0" class="viewItem" bindtap="clickMe">点击view0</view><view id="viewId1" data-hi="dataHi1" data-qf="data-qf1" class="viewItem" bindtap="clickMe">点击view1</view>
</view>

.js代码如下：


var count = 0;
var param = {data : {clickMsg: "显示点击的内容"},clickMe: function(event) { //参数event是事件对象，包含被点击时间、被点击位置坐标等console.log(event);//通过id区分veiw0与view1var id = event.currentTarget.id;//把view0上点击的显示出来param.data.clickMsg = "显示点击内容：" + id + "，共点击次数：" + (++count);//取得data-xxx的值，控件wxml里面可以携带私有数据console.log(event.currentTarget.dataset.qf);//setData重新刷新界面数据this.setData(param.data);}
};

wxss代码如下：


.viewItem {padding: 10px;background-color: limegreen;border-radius: 5px;margin: 5px;
}

运行结果如下：

WeChat小程序development note相关推荐

WeChat小程序·微信登录·开发参考文档
文章目录 1 WeChat小程序登录业务开发 1.1 前期准备 1.2 微信登录流程 1.2.1 官方参考文档 1.2.2 登录流程时序图 1.2.3 步骤分析 1.2.4 重要方法说明 1.2.5 ...
App小程序时间Note
App 小程序. ios平台一款随时记录各类事件发生时间的小程序技术支持网页---by 木星动力目录 1 App 功能介绍 2 软件使用场景介绍 3 软件使用介绍 4 隐私及个人信息收集 5 ...
WeChat小程序授权机制踩坑请求头中设置cookie保持session
思路存储token在redis中,但是现在没有redis,使用session进行存储 ,key为token value为用户信息 session机制使用的文件缓存 token机制使用的redis ...
tcp通信程序发送图片_Unit11：TCP通信、wechat小程序
输出流共享到集合中,服务端遍历集合来广播输出流给客户端,来达到聊天室的功能. 课后作业:使用Mapk来实现@xxx 时,发送私聊内容给对方 Client package chat; import ja ...
WeChat小程序报错Module not found: Can‘t resolve ‘umtrack-alipay‘ in
使用 npm i umtrack-alipay --save 即可npm WARN saveError ENOENT: no such file or directory, open 'D:\phps ...
wechat小程序布局flex
弹性容器的方向 display:flex–>默认是flex-direction:row flex-direction:row 横向布局 flex-direction:column 纵向布局对齐 ...
PHP“动能”运动膳食微信小程序的开发计算机毕业设计源码504978
摘要近年来,随着移动互联网的快速发展,电子商务越来越受到网民们的欢迎,电子商务对国家经济的发展也起着越来越重要的作用.简单的流程.便捷可靠的支付方式.快捷畅通的物流快递.安全的信息保护都使得电子商 ...
微信小程序开发——动画效果
WeChat小程序交流(QQ群:769977169) 动画效果的实现,使用wx.createAnimation实现.具体实现时,首先,创建动画对象,并设置相关的参数:其次,设置动画类型,并执行动画:第 ...
微信小程序开发——登录登出示例
WeChat小程序交流(QQ群:769977169) 登录操作:在进入某个页面之前,判断用户信息是否存在,如果存在则进入该页面,如果不存在则跳转到登录页面. 登出操作:点击登出按钮,清除用户信息,同时 ...