小程序与uniapp
小程序与网页开发的区别
小程序项目初始化
- app.js加载入口文件（应用本地文件存储，将全局应用的数据，存储到本地缓存。操作本地缓存的数据；获取用户信息）
- app.json整个项目配置文件（例如设置小程序的导航条、标题、窗口颜色等）
- app.wxss是整个项目的全局样式文件
1.每个具体文件由四个页面组成
page-name.js 当前页面的入口文件
page-name.json 当前页面的配置文件
page-name.wxml 当前页面的内容（相当于浏览器端的 HTML）WXML 语法
page-name.wxss 当前页面的样式文件，可写 CSS 代码WXSS语法
2.新建文件通过配置
新建页面文件，只需要在 app.json 中的 pages 字段中指定，然后保存 app.json
生命周期
周期主要指两个循环状态前台到后台；初始化到销毁
小程序生命周期分为项目生命周期和页面生命周期
项目生命周期
App({
onLaunch (options) {
//全局只调用一次（逻辑只执行一次）
},
onShow (options) {
//应用初始化完成，从后台切换到前台
},
onHide () {
// 从前台切换到后台（小程序应用转换成别的应用）
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
页面生命周期
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行,一个页面只会加载一次
},
onShow: function() {
// 页面出现在前台时执行，每次打开页面都会加载一次
},
onReady: function() {
// 页面首次渲染完毕时执行，一个页面只会调用一次
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行，当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发此方法，页面卸载（内存释放）
}
})
小程序启动流程
1、小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
2、当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
3、当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法
云API
云API，是微信平台提供的，供小程序调用的接口，常用的云API有：
云 API 作用
wx.getUserInfo 获取用户信息
wx.login 调用接口获取登录凭证（code）
wx.getSetting 获取用户当前设置
wx.setStorageSync 将数据同步存储在本地缓存中
wx.getStorageSync 同步获取本地缓存中的数据
wx.navigateTo 保留当前页面，跳转到应用内的某个页面
页面跳转的方式
1.通过 navigator 组件的url属性
2.给组价通过bindtap属性绑定bindviewTap事件，在事件函数中通过wx.navigateTo进行跳转（事件触发）
3.在app.json中，通过tabBar字段指定tabBar详情
数据绑定
- 在 .js 文件中绑定数据
data 字段设置数据的初始值
this.setData 函数可以更新 data 中绑定的数据 - 在 .wxml 中展示绑定的数据
展示语法是 {{变量名}}
组件
小程序中的组件，对应HTML标签常用view、image、text、navigator
项目实践
1.进入小程序首页通过 wx.getLocation获取当前地理位置信息，需要在app.json中声明permission字段
"permission": {
"scope.userLocation": {
"desc": "您的服务需要位置信息"
}
}
2.根据定位信息，查询当前位置的天气预报，使用和风天气API,需要注册账号获取key
域名不在合法域名列表中上线和开发时解决办法
上线时把报错域名添加到微信公众号平台小程序账号【开发设置】
开发时点击详情-开发设置
WebUI组件库
文档
WeUI下载地址
将dist/style/ 目录下的 weui.wxss复制到项目中然后在全局 app.wxss 中加入 @import "weui.wxss"，至此完成引入
dist 目录，里面 example 目录下，有 WeUI 的代码示例
上传提交审核和发布小程序
微信开发者工具的右上角有上传按钮，点击上传按钮代码上传成功以后，在小程序账号后台管理->版本管理->开发版本下，提交审核，等待审核完成发布上线
UniAPP
UniAPP基于【Vue+微信小程序】语言体系，编写一套代码，可发布到iOS、Android、H5，以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台
插件市场
uniapp文档
uniApp项目文件
page.json类似于微信小程序中的app.json的页面管理部分
uni.scss是方便控制应用的风格，里面是scss变量预置，想要直接使用变量设置style的lang属性为scss即可，还有HbuilderX软件安装scss插件，要想less的使用，需要在vue.config.js中自行配置webpack策略
App.vue页面不是页面，不能编写视图元素，作用包括调用应用生命周期函数、配置全局样式、配置全局的存储globalData
开发规范
● 组件标签靠近小程序规范
● 互连能力（JS API）靠近微信小程序规范，但需要将替换替换 wx 为 uni
● 数据绑定及事件处理同 Vue.js 规范，同时补充了 App 和页面的生命周期
● 为兼容多端运行，建议使用 flex 布局进行开发
生命周期
在uni-app中，生命周期函数分为应用生命周期（APP生命周期）和页面生命周期（Vue生命周期）。下面是它们的具体列表：
应用生命周期（APP生命周期）
onLaunch(options)：应用初始化时触发，全局只触发一次。
onShow(options)：应用启动或从后台进入前台显示时触发。
onHide()：应用从前台进入后台时触发。
onError(err)：应用发生错误时触发。
onUniNViewMessage(Object message)：处理来自Native主动发送的数据。
onThemeChange(Object theme)：系统主题改变时触发（仅App.vue可以监听）。
页面生命周期（Vue生命周期）
onLoad(options)：页面加载时触发，其参数为上个页面传递过来的参数，用于页面传参。
onShow()：页面显示/切入前台时触发。
onReady()：页面初次渲染完成时触发。
onHide()：页面隐藏/切入后台时触发。
onUnload()：页面卸载时触发。
onPullDownRefresh()：用户下拉刷新时触发。
onReachBottom()：页面上拉触底时触发，用于下拉下一页数据。
onTabItemTap(Object item)：点击 tab 时触发（仅适用于微信小程序）。
以上是uni-app中的主要生命周期函数，通过它们你可以控制应用和页面在不同阶段的行为，实现更加精细化的控制和操作。
路由配置
1.类似小程序在app.json中配置路由，开发者需要在pages.json中配置路由路径及页面样式
2.路由跳转两种方式
1）navigator组件跳转,open-type对应了页面栈的不同表现形式，相当于不同的页面跳转API
<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
<button type="default">在当前页打开</button>
</navigator>
2）调用API跳转，API有 uni.redirectTo、 uni.navigateBack、uni.switchTab等
3.获取当前页面栈，在onLoad周期中使用，getCurrentPages()函数用于获取当前页面栈的实例
4.路由传参与接收，onLoad中的option参数就是序列化上个页面的参数，对于复杂的参数建议使用encodeURI、decodeURI进行处理后传递
5.小程序路由分包配置，优化小程序的下载和启动速度，在项目中新建subPackages文件夹，然后在pages.json中新添配置，实现按需下载
点击查看代码
"subPackages": [
{
"root": "news",
"pages": [{
"path": "index",
"style": {
"navigationBarTitleText": "新闻中心",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"backgroundColor": "#FFFFFF"
}
}
]
}
...
]，
// 预下载分包设置
"preloadRule": {
"pages/index": {
"network": "all",
"packages": ["activities"]
}
}
uniapp的事件绑定、组件通信、slot、vuex与vue项目同
uni.request(OBJECT)//发起网络请求
uniapp项目可运行在APP平台（移动应用程序），H5平台（手机端网页和移动应用程序），小程序平台（微信小程序，QQ小程序，百度小程序等）
浏览器平台指谷歌和火狐等浏览器，每个平台都有其专属API，uniapp项目可使用uni专属API和运行在哪个平台下的API
运行环境判断与跨端兼容
1.通过process.env.NODE_ENV === 'development'来判断是生产环境还是开发环境
2.判断平台
1）编译时判断：只有h5平台才有alert方法
2）运行时判断：uni.getSystemInfoSync().platform
3.跨端兼容
<!-- 仅在H5平台下显示 -->
#ifdef H5
<text>This is specific to H5 platform</text>
#endif
uniAPP项目
使用uview框架，挂载了$u的对象，配置按需引入是在pages.json中添加
"easycom": {
// 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"
// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
// npm安装方式
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
将接口API集中管理实现
main.js
import httpApi from '@/common/http.api.js'
Vue.use(httpApi, app)//app是new Vue初始化的实例
http.api.js实现install方法 这样可直接在vue文件中使用this.$u.api.getAdvert来调用接口
const install = (Vue, vm) => {
let api = {}
// 获取广告轮播图
api.getAdvert = params => vm.$u.get('/advertisingspace/advertising', params)
// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
vm.$u.api = api
}
export default {
install
}
全局配置 WebView 展示第三方 web 页面
关键技术点：我们通常为整个应用的 Web H5 相关页面，构建一个专门用来展示的 webview 路由页面(uni-app下的组件)，但是要注意路由传参的时候，对应的 url 需要 decodeURI 、encodeURI
<template>
<web-view :src="url"></web-view>
</template>
<script>
export default {
data() {
return {
url: ''
}
},
onLoad(options) {
this.url = decodeURI(options.url)
}
}
</script>
uViewUI 网络 http 请求封装及 API 集中管理
将uViewUI 网络 http 请求统一封装，导出install方法,token可存放在很多地方
// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式
// config.header.token = vm.token;
// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
// config.header.token = vm.$store.state.token;
// 方式三，如果token放在了globalData，通过getApp().globalData获取
// config.header.token = getApp().globalData.username;
// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的
// 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
// const token = uni.getStorageSync('token');
// config.header.token = token;
瀑布流布局
高度不同，宽度相同，用于展示图片，卡片等内容，含有缺点（移除数据，更新数据会造成整个页面的复杂变化），所以使用uview-ui中的u-waterfall组件
.waterfall-container {
column-count: 3; /* 列数 */
column-gap: 10px; /* 列之间的间隔 */
}
.waterfall-item {
break-inside: avoid; /* 避免元素跨列 */
margin-bottom: 10px; /* 元素间的垂直间隔 */
}
在很多地方都要使用的可通过Vue.prototype.BaseFileURL = 'http://ts.lagou.uieee.com/api/v2/files/'注册，vue文件中通过this.BaseFileURL获取
动态高度的获取
若数据的不同高度也不同，那么需要再容器上的div定义id，监听数据变化，在数据变化是触发定义的全局事件，实现数据通信的目的
<template>
<view class="u-waterfall">
<view id="u-left-column" class="u-column">
<slot name="left" :leftList="leftList"></slot>
</view>
<view id="u-right-column" class="u-column">
<slot name="right" :rightList="rightList"></slot>
</view>
</view>
</template>
<script>
export default {
watch:{
value(){
let leftRect = await this.$uGetRect('#u-left-column');
let rightRect = await this.$uGetRect('#u-right-column');
let height = (leftRect.height > rightRect.height ? leftRect.height : rightRect.height) + 120
uni.$emit('swiperHeightChange', height + 'px')//实现数据通信，将高度传出去
}
}
}
</script>
监听页面滚动事件，滚动到一定位置显示导航onPageScroll方法参数event.scrollTop可获取到滚动位置
onPullDownRefresh()顶部下拉请求更新数据，需要再pages数组中的style下配置enablePullDownRefresh为true
onReachBottom下拉请求新的数据，将旧的数据和新的数据合并
动态详情页配置及使用？！==
在uniapp中可获取界面上的节点信息uni.createSelectorQuery()
$on是监听事件，$emit是触发事件
微信小程序的服务市场会有一系列的功能例如敏感词鉴定，可以购买并使用此服务
多端打包发布
微信小程序，APP发布通过HBuilderX软件点击发行
H5涉及到的跨域问题在manifest.json添加如下配置
"h5" : {
"devServer" : {
"port" : 8000, //端口
"disableHostCheck" : true,
"proxy" : {
//使用代理
"/api" : {
// "target": "http://47.115.83.135/api/v2",
"target" : "http://ts.lagou.uieee.com/api/v2",
"changeOrigin" : true,
"pathRewrite" : {
"^/api" : ""
}
}
}
}
}
添加类似语句来区分不同环境下是否应该有实现该功能的代码 #ifdef MP-WEIXIN
