小程序开发总结

入门级别的小程序，主要是熟悉小程序的开发。

较常用的 就是 页面跳转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 应用程序公共样式，充分考虑到 复用 的思想

使用 tShopfas.setData ( { 属性名：属性值} ) 来更改 data 中的属性， 不能直接赋值，跟 React 中一样 。

网络请求

wx.request( )

常用 UI 组件

swiper 轮播图

模板文件

定义模板

使用 name 属性，作为模板的名字

数据传输标签上增加属性 data={{}}

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

在 wxml 文件中 引入

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控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

{{index}}: {{item.message}}

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 中进行配置

配置 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

默认首页 模仿App引导页面

用轮播图来模仿引导页面

首页 榜单页board

总结：跟 Vue 非常相似，容易上手，唯一有点不同的是 data 数据的赋值 要使用 tShopfas.setData（{属性名：属性值}），而不能直接赋值（tShopfas.data内的值 = XXXX 是不允许的）。

wxml ：运用到小程序组件swiper 轮播图组件，数据跟 Vue 一样用 {{ }} 绑定，循环用 wx:for="{ { } }"

组件 scroll-view可滚动视图区域

组件 nagigator 导航组件 类似 Vue 的router-link, 通过 属性 url 来指定当前小程序内的跳转链接，值是个路径，可以通过？属性名=属性值 &属性名=属性值 的URL 传参的方式 ，将 参数 传递给下个页面。

js ：跟 Vue 类似，数据在 data 中声明， 页面加载 生命周期函数 为 onLoad

注意：如果需要点击时高亮，可以给元素加上 cursor：pointer

列表页 list

wxml

模板的使用

注意 scroll-view 组件 的bindscrolltolower 事件

滚动到底部/右边，会触发 scrolltolower 事件，然后发送 http 请求

注意！！！：使用scroll-view的 竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

js

详情页 item

搜索页面 search

做了个简单的搜索界面