小程序开发学习-1-使用uni-app框架开发微信小程序
使用uni-app框架开发微信小程序
-
优势：
- 同一套代码编译多端（Android、IOS、H5、小程序）
- 接近原生系统，效率更好
- 利用Hbuiler X，开发效率高，内存占用少
- 开发（人力、维护、时间）成本低
- 学过Vue之后，学习成本很低
- 支持npm与自定义组件
- 社区活跃，版本迭代快
页面的生命周期
onLoad() {
console.log('页面加载')
},
onShow() {
console.log('页面显示')
},
onReady() {
console.log('页面初次渲染完成')
},
onHide() {
console.log('页面隐藏')
},
onUnload() {
console.log('页面关闭')
},
onShareAppMessage() {
console.log('页面分享')
},
onPageScroll() {
console.log('页面滚动')
},
onBackPress() { // 不支持小程序，通常写在onLoad中
console.log('页面返回')
},
项目实战
tabBar
- 配置在page.json中
"tabBar":{
"color":"#8F8F94",
"selectedColor":"#007AFF",
"backgroundColor":"#FFFFFF",
"borderStyle":"black",
"list":[
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"static/tabBar/index1.png",
"selectedIconPath":"static/tabBar/index2.png"
},
{
"pagePath":"pages/me/me",
"text":"我的",
"iconPath":"static/tabBar/mine1.png",
"selectedIconPath":"static/tabBar/mine2.png"
},
{
"pagePath":"pages/search/search",
"text":"搜索",
"iconPath":"static/tabBar/search1.png",
"selectedIconPath":"static/tabBar/search2.png"
}
]
}
swiper轮播图组件
- Tips：输入"usw"，可以自动生成swiper的模板
<view class="page">
<swiper
:indicator-dots="true"
:autoplay="true"
class="carousel">
<swiper-item>
<image src="../../static/swiper/swiper_1.jpg" class="carousel">image>
swiper-item>
<swiper-item>
<image src="../../static/swiper/swiper_2.jpg" class="carousel">image>
swiper-item>
swiper>
view>
原生导航栏禁用
-
ps：小程序中的状态栏禁不掉
-
在pages.json中的style属性添加禁用：
"style": {
"app-plus": {
"titleNView":false //禁用
}
}
引入组件实现全局变量
-
方法一
-
在commons/commons.js中提取全局变量：
//提取公共文件
const doubanUrl ="https://images.weserv.nl"; //豆瓣电影
export default { doubanUrl } //常量导出
- 导入common：
import common from "../../commons/commons.js"
//拼接使用"image":common.doubanUrl+"/?url=img1.doubanio.com/view/photo/l/public/p2410755737.webp",
-
方法二
-
也可以在main.js中挂载到Vue：
Vue.prototype.doubanUrl="https://images.weserv.nl";
所有页面都可以获取Vue对象（this.即可，无需import）：
"image":this.doubanUrl+"/?url=//img3.doubanio.com/view/photo/l/public/p2556561071.webp",
小程序Https
-
需要登录之后对域名进行配置，并且只支持Https协议。
-
一旦允许某些域名之后，就可以不用勾选“不校验合法域名、HTTPs证书”。
scroll-view可滚动视图
- 通过本地json获取热门影像的数据：
// 获取热门数据
getHotData(){
// 特别注意：非H5端不能用uni.request来请求本地json数据！！！
const dataRes = await this.$http({url:'/new_movies.json'})
const { subjects : dataRes } = require('../../static/mock/top250.json')
// 截取10条数据
let newArr=[]
for(let i=0;i<dataRes.length;i++){
if(i+this.hotCount-10<this.hotCount){
let item=dataRes[i+this.hotCount-10]
// 对图片做处理.
item.images.small=item.images.small.replace('https://','https://images.weserv.nl/?url=')
newArr.push(item)
}
}
this.hotData=[...this.hotData,...newArr]
},
- 利用v-for来列表渲染动态的滚动视图（评分稍后补充）：
<scroll-view scroll-x="true" class="page-block hot">
<view class="single-poster" v-for="item in hotData" :key="item.id">
<view class="poster-wapper">
<image :src="item.images.small" class="poster">
image>
<view class="movie-name">{{item.title}}view>
<view class="movie-score-wapper">
<view class="movie-score">9.0view>
view>
view>
view>
scroll-view>
video组件开发
- video组件来开发热门视频模块
<view class="hot-movies page-block">
<video
v-for="hotTrailer in hotTrailerList"
:src="hotTrailer.src"
:poster="hotTrailer.poster"
class="hot-movie-single" controls>
video>
view>
配置相应的CSS样式：
/* 热门预告 */
.hot-movies{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between; //视频间隙
padding: 0 20upx 20upx 20upx;
}
.hot-movie-single{
width: 350upx;
height: 220upx;
margin-top: 10upx;
}