小程序开发（入门）
小程序开发总结
入门级别的小程序，主要是熟悉小程序的开发。
较常用的 就是 页面跳转 navigator组件 ， 参数传递的两种方式（navigator组件 和 wx. navigateTo()）。
小程序的生命周期（本案例涉及较少），小程序的 网络请求， 模板的使用。
小程序开发和 Vue 代码风格很像，入门 还是容易的。
github 地址 https://github.com/L1633/WX- ， 希望能 star 一下 ，谢谢了！！
页面结构
一个页面由多个文件组成
① js：定义页面的 逻辑，用于创建页面对象，以及处理页面 生命周期控制 和 数据处理
app.js 有全局的 data 和 方法
每个页面可以通过 const app = getApp() 来 获取应用实例
② json：配置文件，设置当前页面工作时 的 window的配置，此处会覆盖app.json中的 window设置，也就是说只可以设置window中设置的属性
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
③ wxml： 类似 充当 HTML 的角色，用于定义页面元素结构，语法 遵循 XML 语法，不是 HTML语法。
④ wxss：WXSS 具有 CSS 大部分的特性
app.wxss 应用程序公共样式，充分考虑到 复用 的思想
使用 this.setData ( { 属性名：属性值} ) 来更改 data 中的属性， 不能直接赋值，跟 React 中一样 。
网络请求
wx.request( )
常用 UI 组件
swiper 轮播图
模板文件 <template></template>
定义模板
使用 name 属性，作为模板的名字
数据传输 标签上增加属性 data={{ }}
使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
< template is="msgItem" data="{{...item}}"/ >
在 wxml 文件中 引入 <import src=" 模板地址" />
navigator组件
页面与页面之间跳转 可以使用navigator组件
页面与页面之间传值，类似于web开发方式：问号参数 --------> ?属性名=属性值&属性名=属性值
跳转到的页面通过onLoad 方法的参数 options 拿到
onLoad( options ){ } // options . 属性名 来获取想要的参数
编程式导航
wx.navigateTo( { url : ' 地址 ' })
保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
常用 API
文件上传
wx.uploadFile(OBJECT)
位置
wx.getLocation(OBJECT)
数据缓存
wx.getStorageSync(KEY)
框架
wx:for
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
<view wx:for="{{array}}"> {{index}}: {{item.message}} </view>
wx:if 和 wx:else
事件绑定 bindtap
当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象
BaseEvent对象属性列表：type、timeStamp、target、currentTarget
currentTarget（事件绑定的当前组件）：id、tagName、dataset（当前组件 上由data-开头的自定义属性组成的集合）
点击事件传递的参数 event ，包含以 data-属性名 的参数
event . currentTarget . dataset [ 属性名 ]
event中的 target 和 currentTarget 的区别
target 指的是当前点击的组件
currentTarget 指的是 事件捕获的组件
简单小程序：豆瓣电影实战
坑！！！！：豆瓣API 对 微信小程序请求 采取拒绝。 报错 403 forbidden。
解决方法 将 https://api.douban.com 替换为 https://douban.uieee.com
例如 https://api.douban.com/v2/movie/in_theaters 替换为 https://douban.uieee.com/v2/movie/in_theaters
header设置为 header: { 'Content-Type': 'application/xml' }
页面目录结构
结构目录
模仿引导页面
榜单（默认首页）
列表
详情
对项目进行配置
在项目下的app.json 中进行配置
app.json
配置 pages
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录，数组的第一项默认是 显示的页面。
创建整个程序所需要的页面，并进行配置
在 pages/下 创建splash、 board 、list、item 和 search 文件夹，并创建所需要要的 WXML ，WXSS，JS。
在app.js 中添加 pages，pages 中的第一项 会作为 默认页面显示
配置 window
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
配置 tabBar
app.json 中 设置 底部导航栏 tabBar 至少要有2个导航栏
pagePath 对应显示组件 text 文字 iconPath 图标 selectedIconPath 选中图标
selectedColor 选中字体颜色 color 未选择字体颜色 borderStyle tabBar的边框，默认为黑色
工具类
请求函数的封装
秉承复用的思想，将 wx.request （原生的网络请求）进行封装
utils / ajax.js
wx.request封装
默认首页 模仿App引导页面
用轮播图来模仿引导页面
模仿App引导页面
JS
首页 榜单页board
总结：跟 Vue 非常相似，容易上手，唯一有点不同的是 data 数据的赋值 要使用 this.setData（{属性名：属性值}），而不能直接赋值（this.data内的值 = XXXX 是不允许的）。
wxml ：运用到小程序组件 swiper 轮播图组件，数据跟 Vue 一样用 {{ }} 绑定，循环用 wx:for="{ { } }"
组件 scroll-view 可滚动视图区域
组件 nagigator 导航组件 类似 Vue 的router-link, 通过 属性 url 来指定 当前小程序内的跳转链接，值是个路径，可以通过？属性名=属性值 &属性名=属性值 的URL 传参的方式 ，将 参数 传递给下个页面。
榜单页board.wxml
js ：跟 Vue 类似，数据在 data 中声明， 页面加载 生命周期函数 为 onLoad
board.js
注意：如果需要点击时高亮，可以给元素加上 cursor：pointer
列表页 list
wxml
list.wxml
模板的使用
模板
注意 scroll-view 组件 的bindscrolltolower 事件
滚动到底部/右边，会触发 scrolltolower 事件，然后发送 http 请求
注意！！！：使用 scroll-view的 竖向滚动时，需要给一个 固定高度，通过 WXSS 设置 height。
js
js
详情页 item
item.wxml
js
搜索页面 search
做了个简单的搜索界面
wxml
js
