导图社区 尚硅谷小程序
- 21
- 举报
尚硅谷小程序
观看B站视频，尚硅谷小程序的总结，内容包括入门介绍、特点介绍、移动端适配相关内容、适配方案avi、快速模板介绍等等，大家有兴趣的可以先看看这篇思维导图。
编辑于2023-02-17 17:50:04 广东- 前端
- 小程序
- 相似推荐
- 大纲
尚硅谷小程序
01_尚硅谷_入门介绍
02_尚硅谷_相关资料
03_尚硅谷_特点介绍
P4 04_尚硅谷_移动端适配相关内容
https://www.runoob.com/w3cnote/flex-grammar.html
物理像素
屏幕分辨率
1) dpr:设备像素比，物理像素/设备独立像素= dpr，一般以 lphon6的dpr 为准 dpr =2 2) PPI:一英寸显示屏上的像素点个数 3) DPI:最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰
05_尚硅谷_适配方案avi
前端适配
百分比
viewport
rem
布局视口
网页大小
大于视觉视口
视觉视口
手机屏幕大小
lphon6:1rpx =1物理像素= 0.5px微信官方提供的换算方式: 1.以 iPhone6的物理像素个数为标准:750; 2. 1rpx =目标设备宽度/750 * px; 3．注意此时底层已经做了viewport适配的处理，即实现了理想视口
lphon6: 1rpx =1物理像素= 0.5px
视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕，由苹果公司在2010年在iPhone 4发布公上首次推出营销术语。
lphone 的 dpr = 2;人类肉眼分辨的极限 问题: lphone6的dpr为多少? lphone6Plus 比 lphone6 显示图像清晰吗?
3
06_尚硅谷_快速模板介绍
小程序推荐使用display: flex；样式
小程序统一使用class
关闭项目后，再删除
07_尚硅谷_主页面静态页面搭建
pages\index\index.wxml
<!--pages/index/index.wxml--> <view class="indexContainer"> <image class="avator" src="/images/index/cart.jpg"></image> <text class="userName">hello 小程序</text> <view class="goStar"> <text>开启小程序之旅</text> </view> </view>
pages\index\index.wxss
/* pages/index/index.wxss */ page{ height: 100%; background-color: #8BC33F; } .indexContainer{ display: flex; flex-direction: column; align-items: center; } .avator{ width: 200rpx; height: 200rpx; border-radius: 100rpx; margin: 100rpx 0; } .userName{ font-weight: bold; margin: 100rpx 0; font-size: 32rpx; } .goStar{ font-size: 28rpx; width: 220rpx; height: 80rpx; line-height: 80rpx; border: 1px solid #999; text-align: center; border-radius: 10rpx; }
app.js
App({ })
app.json
{ "pages": [ "pages/index/index" ], "window": { "navigationBarBackgroundColor": "#8BC33F", "navigationBarTextStyle": "black", "navigationBarTitleText": "welcome to atguigu" } }
08_尚硅谷_数据绑定，事件分类
最上面窗口颜色只能是16进制的
pages\index\index.wxml
<!--pages/index/index.wxml--> <view class="indexContainer"> <image class="avator" src="/images/index/cart.jpg"></image> <text class="userName">hello {{msg}}</text> <view bindtap="fathertap" class="goStar"> <text bindtap="childtap">开启小程序之旅</text> </view> <view catchtap="fathertap" class="goStar"> <text catchtap="childtap">开启小程序之旅</text> </view> </view>
bindtap不会阻止事件冒泡
catchtap会阻止事件冒泡
09_尚硅谷_声明周期函数说明
// index.js Page({ data: { msg: "北方汉子" }, fathertap(){ console.log('父元素') }, childtap(){ console.log('子元素') }, // 生命周期函数--监听页面加载 onLoad(){ console.log('onLoad-') }, onReady(){ console.log('onReady') }, // 生命周期函数--监听页面显示 onShow(){ console.log('onShow-') }, // 生命周期函数--监听页面隐藏 onHide(){ console.log('onHide-') }, // 生命周期函数--监听页面卸载 onUnload(){ console.log('onUnload-') }, })
线程，程序执行的基本单元
进程，程序的一次完整执行的过程
10_尚硅谷_复习上午知识点
iphone6: 1rpx = 1物理像素 = 0.5px dpr = 物理像素/设备独立像素 = 2
11_尚硅谷_获取用户信息
<button bindgetuserinfo="handleGetUserInfo" style="display: {{isShow ? 'block' : 'none'}};" open-type="getUserInfo">获取用户信息</button>
就是不能弹出弹窗
需要使用2.13.0版本学习
pages\index\index.js
// index.js Page({ data: { msg: "北方汉子", userInfo: {}, isShow: true }, fathertap(){ console.log('父元素') }, childtap(){ console.log('子元素') }, handleGetUserInfo(data){ console.log(data) console.log(data.detail.rawData) if(data.detail.rawData){ // this.onLoad() this.getUserInfo() } }, // 生命周期函数--监听页面加载 onLoad(){ console.log('onLoad-') this.getUserInfo() }, getUserInfo(){ wx.getSetting({ success: (data) => { console.log('jskfdjl') console.log(data) if(data.authSetting['scope.userInfo']){ this.setData({ isShow : false }) }else{ this.setData({ isShow : true }) } } }) wx.getUserInfo({ success: (data) => { console.log(data) this.setData({ userInfo : data.userInfo }) }, fail: () => { console.log('获取用户信息失败') } }) }, onReady(){ console.log('onReady') }, // 生命周期函数--监听页面显示 onShow(){ console.log('onShow-') }, // 生命周期函数--监听页面隐藏 onHide(){ console.log('onHide-') }, // 生命周期函数--监听页面卸载 onUnload(){ console.log('onUnload-') }, })
pages\index\index.wxml
<!--pages/index/index.wxml--> <view class="indexContainer"> <image class="avator" src="{{userInfo.avatarUrl}}"></image> <button bindgetuserinfo="handleGetUserInfo" style="display: {{isShow ? 'block' : 'none'}};" open-type="getUserInfo">获取用户信息</button> <text class="userName">hello {{userInfo.nickName}}</text> <view bindtap="fathertap" class="goStar"> <text bindtap="childtap">开启小程序之旅</text> </view> <!-- <view catchtap="fathertap" class="goStar"> <text catchtap="childtap">开启小程序之旅</text> </view> --> </view>
12_尚硅谷_swiper组件使用
pages\list\list.wxml
<!--pages/list/list.wxml--> <view> <swiper indicator-dots indicator-color="yellowgreen" indicator-active-color="pink"> <swiper-item> <image src="/images/detail/carousel/01.jpg" mode=""/> </swiper-item> <swiper-item> <image src="/images/detail/carousel/02.jpg" mode=""/> </swiper-item> <swiper-item> <image src="/images/detail/carousel/03.jpg" mode=""/> </swiper-item> <swiper-item> <image src="/images/detail/carousel/04.jpg" mode=""/> </swiper-item> </swiper> </view>
pages\list\list.wxss
/* pages/list/list.wxss */ swiper{ width: 100%; height: 400rpx; } swiper image { width: 100%; height: 100%; }
13_尚硅谷_template模块基本使用
pages\template\list-template.wxml
<!--pages/template/list-template.wxml--> <template name="listTmp"> <view class="tmpContainer"> <view class="avatar_date"> <image src="/images/avatar/0.png" mode=""/> <text>may 19 2018</text> </view> <text class="company">尚硅谷</text> <image class="contentImg" src="/images/detail/carousel/01.jpg" mode=""/> <text class="content">尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷</text> <view class="collection_love"> <image src="/images/icon/star.png" mode=""/> <text>88</text> <image src="/images/icon/view.png" mode=""/> <text>88</text> </view> </view> </template>
pages\template\list-template.wxss
/* pages/template/list-template.wxss */ .tmpContainer{ display: flex; flex-direction: column; } .avatar_date{ padding: 10rpx; } .avatar_date image { width: 60rpx; height: 60rpx; vertical-align: middle; margin-right: 10rpx; } .avatar_date text{ font-size: 32rpx; } .company{ margin-left: 10rpx; font-size: 36rpx; font-weight: 700; margin: 10rpx; } .contentImg{ width: 100%; height: 460rpx; } .content{ font-size: 32rpx; text-indent: 32rpx; } .collection_love image{ width: 32rpx; height: 32rpx; margin-right: 10rpx; vertical-align: middle; } .collection_love text{ font-size: 28rpx; margin-right: 10rpx; }
pages\list\list.wxml
<!--pages/list/list.wxml--> <import src="/pages/template/list-template.wxml"/> <view> <swiper indicator-dots indicator-color="yellowgreen" indicator-active-color="pink"> <swiper-item> <image src="/images/detail/carousel/01.jpg" mode=""/> </swiper-item> <swiper-item> <image src="/images/detail/carousel/02.jpg" mode=""/> </swiper-item> <swiper-item> <image src="/images/detail/carousel/03.jpg" mode=""/> </swiper-item> <swiper-item> <image src="/images/detail/carousel/04.jpg" mode=""/> </swiper-item> </swiper> <template is="listTmp"/> </view>
pages\list\list.wxss
/* pages/list/list.wxss */ @import "/pages/template/list-template.wxss"; swiper{ width: 100%; height: 400rpx; } swiper image { width: 100%; height: 100%; }
pages\list\list.js
// pages/list/list.js let data = require('../../datas/list-data.js') Page({ /** * 页面的初始数据 */ data: { listArr: [] }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { this.setData({ listArr: data.list_data }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
14_尚硅谷_列表渲染
pages\list\list.wxml
<!--pages/list/list.wxml--> <import src="/pages/template/list-template.wxml"/> <view> <swiper indicator-dots indicator-color="yellowgreen" indicator-active-color="pink"> <swiper-item> <image src="/images/detail/carousel/01.jpg" mode=""/> </swiper-item> <swiper-item> <image src="/images/detail/carousel/02.jpg" mode=""/> </swiper-item> <swiper-item> <image src="/images/detail/carousel/03.jpg" mode=""/> </swiper-item> <swiper-item> <image src="/images/detail/carousel/04.jpg" mode=""/> </swiper-item> </swiper> <block wx:for="{{listArr}}" wx:key='{{index}}'> <view> <template is="listTmp" data='{{...item}}'/> </view> </block> </view>
pages\template\list-template.wxml
<!--pages/template/list-template.wxml--> <template name="listTmp"> <view class="tmpContainer"> <view class="avatar_date"> <image src="{{avatar}}" mode=""/> <text>{{date}}</text> </view> <text class="company">{{title}}</text> <image class="contentImg" src="{{detail_img}}" mode=""/> <text class="content">{{dewtail_content}}</text> <view class="collection_love"> <image src="/images/icon/star.png" mode=""/> <text>88</text> <image src="/images/icon/view.png" mode=""/> <text>{{attention_count}}</text> </view> </view> </template>
pages\template\list-template.wxss
/* pages/template/list-template.wxss */ .tmpContainer{ display: flex; flex-direction: column; margin: 10rpx 0; border-top: 1rpx solid #eee; border-bottom: 1rpx solid #eee; } .avatar_date{ padding: 10rpx; } .avatar_date image { width: 60rpx; height: 60rpx; vertical-align: middle; margin-right: 10rpx; } .avatar_date text{ font-size: 32rpx; } .company{ margin-left: 10rpx; font-size: 36rpx; font-weight: 700; margin: 10rpx; } .contentImg{ width: 100%; height: 460rpx; } .content{ font-size: 32rpx; text-indent: 32rpx; } .collection_love image{ width: 32rpx; height: 32rpx; margin-right: 10rpx; vertical-align: middle; } .collection_love text{ font-size: 28rpx; margin-right: 10rpx; }
15_尚硅谷_复习之前知识点
16_尚硅谷_detail详情页静态页面搭建
所以说以后写前端，先把html结构写完，然后在写css，最后js
正规的公司有命名规范，我们的公司是小公司
pages\detail\detail.wxml
<!--pages/detail/detail.wxml--> <view class="detailContainer"> <image class="headImg" src="/images/detail/carousel/01.jpg" mode=""/> <view class="avatar_date"> <image src="/images/avatar/0.png" mode=""/> <text>美国队长</text> <text>发布于</text> <text>may 19 2018</text> </view> <text class="company">尚硅谷</text> <view class="collection_share_container"> <view class="collection_share"> <image src="/images/icon/collection-anti.png" mode=""/> <image src="/images/icon/share.png" mode=""/> </view> <view class="line"></view> </view> <button>转发此文章</button> <text class="content">尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷</text> </view>
pages\detail\detail.wxss
/* pages/detail/detail.wxss */ .detailContainer{ display: flex; flex-direction: column; } .headImg{ width: 100%; height: 460rpx; } .avatar_date { padding: 10rpx; } .avatar_date image{ width: 64rpx; height: 64rpx; vertical-align: middle; } .avatar_date text{ font-size: 28rpx; margin-left: 10rpx; } .company{ font-size: 38rpx; font-weight: bold; margin-left: 10rpx; } .collection_share{ float: right; margin-right: 50rpx; } .collection_share image{ width: 90rpx; height: 90rpx; margin-right: 20rpx; } .collection_share_container{ position: relative; } .line{ width: 90%; background-color: #eee; height: 1rpx; margin-left: 5%; top: 45rpx; z-index: -1; position: absolute; } button{ height: 80rpx; width: 280rpx; } .content{ margin-top: 20rpx; font-size: 32rpx; text-indent: 32rpx; }
17_尚硅谷_detail详情页数据动态展示
pages\detail\detail.js
// pages/detail/detail.js const datas = require("../../datas/list-data.js") Page({ /** * 页面的初始数据 */ data: { detailObj: {}, index: null }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { console.log(options) let index = options.index this.setData({ detailObj: datas.list_data[index], index }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
pages\detail\detail.wxml
<!--pages/detail/detail.wxml--> <view class="detailContainer"> <image class="headImg" src="{{detailObj.detail_img}}" mode=""/> <view class="avatar_date"> <image src="{{detailObj.avatar}}" mode=""/> <text>{{detailObj.author}}</text> <text>发布于</text> <text>{{detailObj.date}}</text> </view> <text class="company">{{detailObj.title}}</text> <view class="collection_share_container"> <view class="collection_share"> <image src="/images/icon/collection-anti.png" mode=""/> <image src="/images/icon/share.png" mode=""/> </view> <view class="line"></view> </view> <button>转发此文章</button> <text class="content">{{detailObj.detail_content}} </text> </view>
pages\list\list.js
// pages/list/list.js let data = require('../../datas/list-data.js') Page({ /** * 页面的初始数据 */ data: { listArr: [] }, toDeatil(event){ let index = event.currentTarget.dataset.index wx.navigateTo({ url: "/pages/detail/detail?index=" + index, }) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { this.setData({ listArr: data.list_data }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
pages\list\list.wxml
<!--pages/list/list.wxml--> <import src="/pages/template/list-template.wxml"/> <view> <swiper indicator-dots indicator-color="yellowgreen" indicator-active-color="pink"> <swiper-item> <image src="/images/detail/carousel/01.jpg" mode=""/> </swiper-item> <swiper-item> <image src="/images/detail/carousel/02.jpg" mode=""/> </swiper-item> <swiper-item> <image src="/images/detail/carousel/03.jpg" mode=""/> </swiper-item> <swiper-item> <image src="/images/detail/carousel/04.jpg" mode=""/> </swiper-item> </swiper> <block wx:for="{{listArr}}" wx:key='index'> <view catchtap="toDeatil" data-index="{{index}}"> <template is="listTmp" data='{{...item}}'/> </view> </block> </view>
18_尚硅谷_currentTarget和target的区别
1) target指向的是触发事件的元素 2) currentTarget指向的是捕获事件的元素
pages\list\list.js
// pages/list/list.js let data = require('../../datas/list-data.js') Page({ /** * 页面的初始数据 */ data: { listArr: [] }, toDeatil(event){ let index = event.currentTarget.dataset.index wx.navigateTo({ url: "/pages/detail/detail?index=" + index, }) }, clicktap(event){ let index = event.target.dataset.index wx.navigateTo({ url: "/pages/detail/detail?index=" + index, }) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { this.setData({ listArr: data.list_data }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
pages\list\list.wxml
<!--pages/list/list.wxml--> <import src="/pages/template/list-template.wxml"/> <view> <swiper catchtap="clicktap" indicator-dots indicator-color="yellowgreen" indicator-active-color="pink"> <swiper-item> <image data-index="1" src="/images/detail/carousel/01.jpg" mode=""/> </swiper-item> <swiper-item> <image data-index="0" src="/images/detail/carousel/02.jpg" mode=""/> </swiper-item> <swiper-item> <image data-index="2" src="/images/detail/carousel/03.jpg" mode=""/> </swiper-item> <swiper-item> <image data-index="3" src="/images/detail/carousel/04.jpg" mode=""/> </swiper-item> </swiper> <block wx:for="{{listArr}}" wx:key='index'> <view catchtap="toDeatil" data-index="{{index}}"> <template is="listTmp" data='{{...item}}'/> </view> </block> </view>
19_尚硅谷_收藏功能显示完成
pages\detail\detail.wxml
<!--pages/detail/detail.wxml--> <view class="detailContainer"> <image class="headImg" src="{{detailObj.detail_img}}" mode=""/> <view class="avatar_date"> <image src="{{detailObj.avatar}}" mode=""/> <text>{{detailObj.author}}</text> <text>发布于</text> <text>{{detailObj.date}}</text> </view> <text class="company">{{detailObj.title}}</text> <view class="collection_share_container"> <view catchtap="collecteHandle" class="collection_share"> <image wx:if="{{!isCollected}}" src="/images/icon/collection-anti.png" mode=""/> <image wx:if="{{isCollected}}" src="/images/icon/collection.png" mode=""/> <image src="/images/icon/share.png" mode=""/> </view> <view class="line"></view> </view> <button>转发此文章</button> <text class="content">{{detailObj.detail_content}} </text> </view>
pages\detail\detail.js
// pages/detail/detail.js const datas = require("../../datas/list-data.js") Page({ /** * 页面的初始数据 */ data: { detailObj: {}, index: null, isCollected: false }, collecteHandle(){ const isCollected = !this.data.isCollected this.setData({ isCollected }) let title = isCollected ? '收藏成功' : "取消收藏" wx.showToast({ title, icon: 'success' }) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { console.log(options) let index = options.index this.setData({ detailObj: datas.list_data[index], index }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
20_尚硅谷_收藏功能逻辑实现
pages\detail\detail.js
// pages/detail/detail.js const datas = require("../../datas/list-data.js") Page({ /** * 页面的初始数据 */ data: { detailObj: {}, index: null, isCollected: false }, collecteHandle(){ const isCollected = !this.data.isCollected this.setData({ isCollected }) let title = isCollected ? '收藏成功' : "取消收藏" wx.showToast({ title, icon: 'success' }) let {index} = this.data wx.getStorage({ key: 'isCollected', success: (datas) => { let obj = datas.data obj[index] = isCollected wx.setStorage(({ key: 'isCollected', data: obj, success: () => { console.log('缓存成功') } })) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { console.log(options) let index = options.index this.setData({ detailObj: datas.list_data[index], index }) let detailStorage = wx.getStorageSync('isCollected') console.log(detailStorage) if(!detailStorage){ wx.setStorageSync('isCollected', {}) } if(detailStorage[index]){ this.setData({ isCollected: true }) } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
21_尚硅谷_音乐播放基本功能实现
pages\detail\detail.wxml
<!--pages/detail/detail.wxml--> <view class="detailContainer"> <image class="headImg" src="{{detailObj.detail_img}}" mode=""/> <image catchtap="handleMusicPlay" class="musicImg" src="{{ isMusicPlay ? '/images/music/music-start.png' : '/images/music/music-stop.png' }}" mode=""/> <view class="avatar_date"> <image src="{{detailObj.avatar}}" mode=""/> <text>{{detailObj.author}}</text> <text>发布于</text> <text>{{detailObj.date}}</text> </view> <text class="company">{{detailObj.title}}</text> <view class="collection_share_container"> <view catchtap="collecteHandle" class="collection_share"> <image wx:if="{{!isCollected}}" src="/images/icon/collection-anti.png" mode=""/> <image wx:if="{{isCollected}}" src="/images/icon/collection.png" mode=""/> <image src="/images/icon/share.png" mode=""/> </view> <view class="line"></view> </view> <button>转发此文章</button> <text class="content">{{detailObj.detail_content}} </text> </view>
pages\detail\detail.js
// pages/detail/detail.js const datas = require("../../datas/list-data.js") Page({ /** * 页面的初始数据 */ data: { detailObj: {}, index: null, isCollected: false, isMusicPlay: false }, handleMusicPlay(){ let isMusicPlay = !this.data.isMusicPlay this.setData({ isMusicPlay }) if(isMusicPlay){ let { dataUrl, title } = this.data.detailObj.music wx.playBackgroundAudio({ dataUrl, title }) }else{ wx.pauseBackgroundAudio() } }, collecteHandle(){ const isCollected = !this.data.isCollected this.setData({ isCollected }) let title = isCollected ? '收藏成功' : "取消收藏" wx.showToast({ title, icon: 'success' }) let {index} = this.data wx.getStorage({ key: 'isCollected', success: (datas) => { let obj = datas.data obj[index] = isCollected wx.setStorage(({ key: 'isCollected', data: obj, success: () => { console.log('缓存成功') } })) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { console.log(options) let index = options.index this.setData({ detailObj: datas.list_data[index], index }) let detailStorage = wx.getStorageSync('isCollected') console.log(detailStorage) if(!detailStorage){ wx.setStorageSync('isCollected', {}) } if(detailStorage[index]){ this.setData({ isCollected: true }) } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
22_尚硅谷_音乐播放功能完整实现
pages\detail\detail.js
// pages/detail/detail.js const datas = require("../../datas/list-data.js") let appDates = getApp() console.log(appDates) Page({ /** * 页面的初始数据 */ data: { detailObj: {}, index: null, isCollected: false, isMusicPlay: false }, handleMusicPlay(){ let isMusicPlay = !this.data.isMusicPlay this.setData({ isMusicPlay }) if(isMusicPlay){ let { dataUrl, title } = this.data.detailObj.music wx.playBackgroundAudio({ dataUrl, title }) }else{ wx.pauseBackgroundAudio() } }, collecteHandle(){ const isCollected = !this.data.isCollected this.setData({ isCollected }) let title = isCollected ? '收藏成功' : "取消收藏" wx.showToast({ title, icon: 'success' }) let {index} = this.data wx.getStorage({ key: 'isCollected', success: (datas) => { let obj = datas.data obj[index] = isCollected wx.setStorage(({ key: 'isCollected', data: obj, success: () => { console.log('缓存成功') } })) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { console.log(options) let index = options.index this.setData({ detailObj: datas.list_data[index], index }) let detailStorage = wx.getStorageSync('isCollected') console.log(detailStorage) if(!detailStorage){ wx.setStorageSync('isCollected', {}) } if(detailStorage[index]){ this.setData({ isCollected: true }) } wx.onBackgroundAudioPlay((res) => { this.setData({ isMusicPlay: true }) appDates.data.isPlay = true appDates.data.pageIndex = index }) if(appDates.data.isPlay && appDates.data.pageIndex === index){ this.setData({ isMusicPlay: true }) } wx.onBackgroundAudioPause((res) => { this.setData({ isMusicPlay: false }) appDates.data.isPlay = false }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
pages\detail\detail.wxml
<!--pages/detail/detail.wxml--> <view class="detailContainer"> <image class="headImg" src="{{ isMusicPlay ? detailObj.music.coverImgUrl : detailObj.detail_img}}" mode=""/> <image catchtap="handleMusicPlay" class="musicImg" src="{{ isMusicPlay ? '/images/music/music-start.png' : '/images/music/music-stop.png' }}" mode=""/> <view class="avatar_date"> <image src="{{detailObj.avatar}}" mode=""/> <text>{{detailObj.author}}</text> <text>发布于</text> <text>{{detailObj.date}}</text> </view> <text class="company">{{detailObj.title}}</text> <view class="collection_share_container"> <view catchtap="collecteHandle" class="collection_share"> <image wx:if="{{!isCollected}}" src="/images/icon/collection-anti.png" mode=""/> <image wx:if="{{isCollected}}" src="/images/icon/collection.png" mode=""/> <image src="/images/icon/share.png" mode=""/> </view> <view class="line"></view> </view> <button>转发此文章</button> <text class="content">{{detailObj.detail_content}} </text> </view>
app.js
// app.js App({ data: { isPlay: false, pageIndex: null } })
23_尚硅谷_复习上午知识点
24_尚硅谷_分享功能演示
<button open-type="share">转发此文章</button>
25_尚硅谷_tab切换
app.json
{ "pages": [ "pages/list/list", "pages/index/index", "pages/detail/detail", "pages/movies/movies" ], "window": { "navigationBarBackgroundColor": "#489B81", "navigationBarTextStyle": "black", "navigationBarTitleText": "welcome to atguigu" }, "tabBar": { "list": [ { "pagePath": "pages/list/list", "text": "文与字", "iconPath": "/images/tab/yuedu.png", "selectedIconPath": "/images/tab/yuedu_hl.png" }, { "pagePath": "pages/movies/movies", "text": "电影频道", "iconPath": "/images/tab/dianying.png", "selectedIconPath": "/images/tab/dianying_hl.png" } ] } }
先创建movies文件夹
注意显示的顺序
"pages": [ "pages/list/list", "pages/index/index", "pages/detail/detail", "pages/movies/movies" ],
26_尚硅谷_发送ajax请求实现数据交互
http://t.yushu.im/v2/movie/top250
请求地址不行了，使用不了
使用固定的数据
不换行，多于的内容显示 “...”
27_尚硅谷_电影详情页完成
app.json
// app.js App({ data: { isPlay: false, pageIndex: null, moviesArr: [] } })
pages\movies\movies.wxml
<!--pages/movies/movies.wxml--> <navigator url="/pages/movieDetail/movieDetail?index={{index}}" class="moviesContainer" wx:for="{{movies}}" wx:key="index"> <image class="movieImg" src="{{item.detail_img}}" mode=""/> <view class="movie_detail"> <text class="movie_name">{{item.title}}</text> <text class="movie_year">{{item.date}}</text> <text class="movie_director">{{item.detail}}</text> </view> <text class="movie_rating">{{item.love_count}}</text> </navigator>
pages\movies\movies.js
// pages/movies/movies.js // const MOVIE_URL = 'http://t.yushu.im/v2/movie/top250' let data = require('../../datas/list-data.js') let appData = getApp() Page({ /** * 页面的初始数据 */ data: { movies: [] }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { // wx.request({ // url: MOVIE_URL, // success: (data) => { // console.log(data) // } // }) console.log(data) let movies = data.list_data this.setData({ movies }) appData.data.moviesArr = movies }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
pages\movieDetail\movieDetail.wxml
<!--pages/movieDetail/movieDetail.wxml--> <view class="movieDetailContainer"> <image class="movie_img" src="{{movie.detail_img}}" mode=""/> <text class="movie_name">{{movie.title}}</text> <view class="movie_detail"> <text>评分：{{movie.love_count}}</text> <text>导演：{{movie.detail}}</text> <text>主演：{{movie.detail}}</text> </view> <button>我要观影</button> </view>
pages\movieDetail\movieDetail.js
// pages/movieDetail/movieDetail.js const appDate = getApp() Page({ /** * 页面的初始数据 */ data: { movie: {} }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { let index = options.index console.log(index) console.log(appDate) this.setData({ movie: appDate.data.moviesArr[index] }) console.log(this.data.movie) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
28_尚硅谷_最终效果演示
pages\index\index.js
// index.js Page({ data: { msg: "北方汉子", userInfo: {}, isShow: true }, fathertap(){ console.log('父元素') }, childtap(){ console.log('子元素') }, handleGetUserInfo(data){ console.log(data) console.log(data.detail.rawData) if(data.detail.rawData){ // this.onLoad() this.getUserInfo() } }, handleClick(){ // wx.navigateTo({ wx.switchTab({ url: "/pages/list/list" }) // wx.redirectTo({ // url: "/pages/list/list" // }) }, // 生命周期函数--监听页面加载 onLoad(){ console.log('onLoad-') this.getUserInfo() }, getUserInfo(){ wx.getSetting({ success: (data) => { console.log('jskfdjl') console.log(data) if(data.authSetting['scope.userInfo']){ this.setData({ isShow : false }) }else{ this.setData({ isShow : true }) } } }) wx.getUserInfo({ success: (data) => { console.log(data) this.setData({ userInfo : data.userInfo }) }, fail: () => { console.log('获取用户信息失败') } }) }, onReady(){ console.log('onReady') }, // 生命周期函数--监听页面显示 onShow(){ console.log('onShow-') }, // 生命周期函数--监听页面隐藏 onHide(){ console.log('onHide-') }, // 生命周期函数--监听页面卸载 onUnload(){ console.log('onUnload-') }, })
在tabBar中的页面，跳转，需要用switchTab