
微信小程序入门与实战
微信小程序入门与实战
leeeeeenas
这个作者很懒,什么都没留下…
展开
-
微信小程序入门与实战(11)——搜索页面、更多页面、电影详情页面
搜索页面、更多页面、电影详情页面功能搜索页面movies.jsonmovies.wxmlmovies.js更多页面功能解析more-movie.jsonmore-movie.wxmlmore-movie.wxssmore-movie.js电影详情页面movie-detail.jsonmovie-detail.wxmlmovie-detail.wxssutil.js功能搜索页面:实现点击搜索框,弹出搜索的电影结果更多页面:点击电影页面的更多按钮,显示对应模块的更多电影电影详情页面:点击对应的电影,进入原创 2020-11-08 20:28:04 · 2659 阅读 · 0 评论 -
微信小程序入门与实战(10)——绑定服务端的数据
pages/movies/movies.js// pages/movies/movies.jsconst app = getApp()Page({ /** * 页面的初始数据 */ data: { inTheaters:[], comingSoon:[], top250:[], }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.request({ .原创 2020-10-18 23:03:58 · 335 阅读 · 0 评论 -
微信小程序入门与实战(9)——wx.request回调函数中this.setData提示this未定义的解决办法
// pages/movies/movies.jsPage({ /** * 页面的初始数据 */ data: { inTheaters:[], }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.request({ url: 'http://t.talelin.com/v2/movie/in_theaters', success(res){原创 2020-10-18 22:09:25 · 1482 阅读 · 0 评论 -
微信小程序入门与实战(8)——使用嵌套自定义组件创建电影页面
components/movie/indexindex.wxml<!--components/moive/index.wxml--><view class="container"> <image class="poster" src="/img/iqiyi.png"></image> <text class="title">盗梦空间</text> <view class="rate-container".原创 2020-10-18 21:06:05 · 806 阅读 · 0 评论 -
微信小程序入门与实战(7)——使用自定义组件改写posts页面
wxml<view bind:tap="onTap" class="post-container"> <view class="post-author-date"> <image class="post-author" src="{{res.avatar}}"></image> <text class="post-date">{{res.date}}</text> </view> <te.原创 2020-10-18 19:03:19 · 339 阅读 · 0 评论 -
微信小程序入门与实战(6)——tabbar及页面跳转
app.json参考链接:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html{ "pages": [ "pages/welcome/welcome", "pages/posts/posts", "pages/posts/post-detail/post-detail", "pages/movies/movies" ], "window": {原创 2020-10-18 16:58:05 · 387 阅读 · 0 评论 -
微信小程序入门与实战(5)——详情页的点击收藏功能和音乐点击播放暂停功能
这里使用缓存来保存文章的收藏状态,用app里面的全局变量保存音乐的播放状态wxml页面<!--pages/posts/post-detail/post-detail.wxml--><view class="container"> <view class="head-container"> <image class="head-image" src="{{postData.headImgSrc}}"></image> &l.原创 2020-10-18 15:27:33 · 1009 阅读 · 1 评论 -
微信小程序入门与实战(4)——阅读详情页面的html/css页面,以及从阅读文章列表页面的数据传送
html页面<!--pages/posts/post-detail/post-detail.wxml--><view class="container"> <view class="head-container"> <image class="audio" src="/img/music/music-stop.png"></image> <image class="head-image" src="/img/post.原创 2020-10-12 23:05:52 · 686 阅读 · 0 评论 -
微信小程序入门与实战(1)——欢迎页面
welcome.wxml<!--pages/welcome.wxml--><view class="container"><!--<image class="user-avator" src="/img/welcome.jpg"></image>--><l-avatar class="l-avatar" shape="circle" placement="bottom" size="180" open-da.原创 2020-10-09 19:54:43 · 539 阅读 · 0 评论 -
微信小程序入门与实战(3)——阅读文章列表页面导入js模拟的数据
data/data.jsvar postLists = [ { date: "Sep 18 2016", title: "正是虾肥蟹壮时", imgSrc: "/img/post/crab.png", avatar: "/img/avatar/1.png", content: "菊黄蟹正肥,品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事;用林妹妹的话讲是“螯封嫩玉双双满,", reading: "112", collectio.原创 2020-10-09 21:05:12 · 642 阅读 · 0 评论 -
微信小程序入门与实战(2)——阅读文章列表页面html/css部分
先自定义填写数据,完成css样式的编写。posts.wxml<!--pages/posts/posts.wxml--><swiper indicator-dots="{{true}}" vertical="{{false}}" autoplay="{{true}}" intervsl="3000"> <swiper-item> <image src="/img/wx.png" /> </swiper-item> <.原创 2020-10-09 19:58:57 · 877 阅读 · 0 评论