目录

一、第一章

1.入门

（1）小程序官网：注册账号、安装开发者工具：https://mp.weixin.qq.com/cgi-bin/wx

（2）目录结构

       1）主目录结构

      2）页面目录结构 

 （3）数据绑定

 2.第一个微信小程序

3.小程序的页面加载

4.小程序生命周期

5.调试

6.页面跳转

wx.navigateTo(Object object)

wx.redirectTo(Object object)     重定向

7. 事件触发

8.小程序的模块化 

9.视图层数据绑定 

  (1) 内容上的绑定

（2）组件属性

（3）控制属性

10.模板以及模板的外部引用

二、第二章

1.flex布局

2.组件 

小程序基础组件

三、第3章 form表单组件与小程序前后端通信

3.1.组件

3.2小程序前后端通信

1.小程序不能直接访问后台接口，不同于web应用

2.如何通信（实现）

一、第一章

1.入门

（1）小程序官网：注册账号、安装开发者工具：https://mp.weixin.qq.com/cgi-bin/wx

（2）目录结构

功能页面都是由4个文件构成，命名方式一样

       1）主目录结构

• app.js-外部全局主js，可以当做一个父类，其他js可以调用这里的函数，一个小程序只有一个
• app.json-全局配置文件 里面配置的都是对象
• app.wxss-全局主样式，公用

      2）页面目录结构 

• items.js-私有的js，相当于子类
• items.json-以json对象形式存在的配置
• items.wxml-元素所渲染的页面
• items.wxss-私有样式

logs页面，微信提供的查看日志的页面 

 （3）数据绑定

创建一个默认小程序后，结构如上面所示。

每个页面的js文件中申明数据，在wxml页面使用，现在js框架很多都是用{{}}使用数据比如vue.js

 2.第一个微信小程序

onLaunch生命周期中用到的一个函数，函数会在小程序一打开后触发这个函数

app.json配置说明：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

3.小程序的页面加载

定义在第一行的页面，小程序默认加载pages中的第一个目录，其他目录需要通过触发才能加载

4.小程序生命周期

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

onLaunch
onShow    后台到前台
onHide     前台到后台

onError

其他

5.调试

debugger;   f10单部跳过，F8跳到下一个短点

6.页面跳转

wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。

尽量避免navigateTo的使用

wx.redirectTo(Object object)     重定向

关闭当前页面（这时候会触发onUnload），跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

更多页面跳转https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html

7. 事件触发

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

<text data-hei='try' bindtap='tryclick'>点击</text>

在js文件的page中绑定事件

data- 像html中那样可以自己自定义数据，也可以访问到他

  tryclick:function(event){    console.log("点击了")    console.log(event)    var hei =event.currentTarget.dataset.hei;    console.log(hei);  }

8.小程序的模块化 

抽离通用方法作为通用函数
构建utils-common类

9.视图层数据绑定 

JQuery dom操作$选择器
微信小程序是通过数据绑定  同vue/react

*js中通过data对象与*.wxml的元素绑定     {{data}>Mustache 表达式语法

  (1) 内容上的绑定

（2）组件属性

（3）控制属性

....https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

10.模板以及模板的外部引用

◆模板在某个wxml中定义完毕后可以被其他页面引用
· 关键字import
◆A引用B，B引用C，A不能引用C

二、第二章

1.flex布局

小程序建议使用flex布局进行排版

flex就是一个盒装弹性布局(可以可以做到响应式布局)

flex是一个容器，所有子元素都是他的成员

定义布局display:flex

flex 容器的属性：
flex-direction：排列方向
flex-wrap：换行规则
justify-content：对齐方式

1）flex-direction
◆row                 从左到右 （默认）   column    上到下
◆row-reverse    从右到左                   column-reverse    下到上

2）flex-wrap
◆nowrap    不换行（默认）如果长度超过会进行压缩
◆wrap         换行
◆wrap-reverse  倒序换行

3）justify-content
◆flex-start 左对齐
◆flex-end  右对齐
◆center     居中对齐     

◆space-between   让空格围绕在成员中间   
◆space-around    让空格围绕在成员周围 

4）flex 容器成员的属性
◆order：成员之间的显示顺序       定义在样式里，有点像css中的z-index
◆flex：成员所占屏幕的比例

2.组件 

◆多个组件构成一张视图页面
◆组件包含<开始标签></结束标签>
◆每个组件都包含一些公用属性

1）view

2）scroll-view

即设置为某元素id时，一打开是默认在该元素的位置 

3）swiper 滑块视图容器  轮播图之类的可以用

4）movable-area和movable-view

小程序基础组件

◆icon图标组件             ◆rich-text 富文本组件
◆text文本组件              ◆progress 进度条组件

三、第3章 form表单组件与小程序前后端通信

3.1.组件

label组件 

用来改进表单组件的可用性。

使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：button, checkbox, radio, switch。

picker组件

选择器中 e.detail.value的值为选中第几个

3.2小程序前后端通信

1.小程序不能直接访问后台接口，不同于web应用

小程序只能访问在线的并且已经通过域名绑定过的后台程序，而且小程序访问的URL不能带端口号

2.如何通信

通过内网穿透实现暴露到公网，将本地的ip与端口号暴露到公网，并且映射到某个域名下

工具：ngrok  https://ngrok.com/

用户穿过防火墙到云端，相互访问

（1）下载 ——解压 

（2）  获取安全token

在当前位置的cmd命令中运行 

查看是否运行成功

准备暴露端口，准备一个springboot项目，访问

浏览器访问localhost:8080/hello

接下来准备暴露8080端口输入：ngrok http 8080

暴露成功：

画红框的就是当前生成的随机域名，不仅提供了http还提供了https 

https://d2ed7f01.ngrok.io

然后用这串网址代替刚才的localhost:8080访问hello效果是一样的

3.小程序与后端通信

内网暴露成功后，开始写小程序的代码：

wx.request（OBJECT）wx.request 官方文档
类似于ajax调用

小程序以 String进行传参

后端代码（这里用到了fastjson）

    @RequestMapping("/info")    public String info(Info info) {        System.out.println(info.toString());        Map<String,Object> info2 = new HashMap<>();        info2.put("id",info.getId());        info2.put("name",info.getName());        String s = new JSONObject().toJSONString(info2);        return s;    }

小程序端：

  wx.request({    url: 'https://1a89a611.ngrok.io/info',     data: {      id: 100,      name: 'zhangsan'    },    header: {      'content-type': 'application/json' // 默认值    },    success(res) {      console.log(res.data)    }  })

小程序返回效果：