小程序 - 随笔分类 - ~快乐王子~

（十七）微信小程序：全局优化

摘要：全局优化（针对全局配置中的globalDate） 1.在app.js中设置全局变量globalData存储doubanUrl 1 //app.js 2 App({ 3 globalData: { 4 doubanAPI:"http://localhost:8888" 5 } 6 }) app.js 阅读全文

posted @ 2020-04-27 15:42 ~快乐王子~ 阅读(259) 评论(0) 推荐(0)

（十六）微信小程序：电影详情页

摘要：电影详情页 1.创建movie-details目录（1）movie-details.wxml 1  2 <import src="../stars-template/stars-template. 阅读全文

posted @ 2020-04-27 15:10 ~快乐王子~ 阅读(1495) 评论(0) 推荐(0)

（十五）微信小程序：优化电影页面

摘要：优化电影页面 1.显示：正在加载的提示首先查看API 1 onLoad: function (options) { 2 console.log(options.category); 3 var publicURL = ""; 4 switch(options.category){ 5 case 阅读全文

posted @ 2020-04-27 10:33 ~快乐王子~ 阅读(403) 评论(0) 推荐(0)

（十四）微信小程序：上拉加载下拉刷新

摘要：一：上拉加载 1.movie-more.js中添加API给出的onReachBottom()函数，执行加载操作 // pages/movie/movie-more/movie-more.js var utils = require("../../../utils/utils.js"); Page({ 阅读全文

posted @ 2020-04-26 21:32 ~快乐王子~ 阅读(348) 评论(0) 推荐(0)

（十三）微信小程序：更多电影页面

摘要：实现点击更多进入更多电影界面 1.创建movie-more目录，实现movie界面向movie-more的跳转首先跳转功能在前面学习过，但此次添加了在url中传递参数category以判断打开的是查询哪一类型电影数据。在movie.js中添加函数moreHandler实现跳转 moreHandl 阅读全文

posted @ 2020-04-26 17:32 ~快乐王子~ 阅读(718) 评论(0) 推荐(0)

（十二）微信小程序：星星处理

摘要：电影星星和评分处理 1.明确获取到的评分和星星的换算关系 /** * 星星： * 评分：0,40,30,20,0,50 * 评分与星星换算:40-->4 * star=[] * 针对4星:[1,1,1,1,0] */ 逻辑解释最终传入的星星数据是由数据进行存储的 2.utils.js中对于“将获取阅读全文

posted @ 2020-04-26 11:58 ~快乐王子~ 阅读(693) 评论(0) 推荐(0)

（十一）微信小程序：电影页面数据适配

摘要：电影页面数据适配上一节我们已经获取到了豆瓣的电影数据，那么接下来我们实现将获取到的数据放到页面上一：数据过滤 1.为什么进行数据过滤？我们只需要取得部分数据显示到界面上，因此需要将数据过滤 2.初步过滤后形成一类型数据（正在热映），还需进一步过滤形成（正在热映、即将热映、排行榜）三部分 // 阅读全文

posted @ 2020-04-26 10:11 ~快乐王子~ 阅读(495) 评论(0) 推荐(0)

（十）微信小程序：电影数据获取

摘要：电影数据获取 1.使用豆瓣电影API接口 https://douban.uieee.com/v2/movie/top250 小程序不能直接访问此接口，因此需要搭建服务器来访问 2.搭建服务器（1）创建server文件夹需要两个文件放置 var express = require("express 阅读全文

posted @ 2020-04-25 20:00 ~快乐王子~ 阅读(1772) 评论(0) 推荐(0)

（九）微信小程序：电影页面UI设计

摘要：电影页面UI设计 1.理清逻辑+辨清可复用元素=template <!-- 页面可复用元素 1.列表电影 movie-list-template 2.电影信息 movie-template 3.评分信息 stars-template 层级关系:movie > movie-list-template 阅读全文

posted @ 2020-04-25 15:25 ~快乐王子~ 阅读(1436) 评论(0) 推荐(0)

（八）微信小程序：tabBar应用

摘要：全局配置里的tabBar 1.查看API中的全局配置，了解tabBar的结构根据API设置属性：设置tabBar中的字体+背景： 2.主要在app.json中进行全局配置即可 { "pages": [ "pages/index/index", "pages/logs/logs", "pages/ 阅读全文

posted @ 2020-04-25 13:01 ~快乐王子~ 阅读(529) 评论(0) 推荐(0)

（七）微信小程序：收藏功能

摘要：收藏功能 1.利用数据缓存进行对是否首次进入响应新闻页面进行判断（1）查看API中关于数据缓存部分，了解如何获取、设置本地数据（2）了解本地存储的收藏信息数据结构：（3）进行逻辑判断：是否为首次进入页面（在onLoad中进行判断） // pages/news/news-details/news 阅读全文

posted @ 2020-04-25 12:07 ~快乐王子~ 阅读(2993) 评论(1) 推荐(1)

（六）微信小程序：制作新闻详情页

摘要：制作新闻详情页 1.实现：点击新闻实现跳转至详情页面（1）news.wxml中利用bindtag实现跳转至执行函数 <block wx:for="{{ news }}" wx:for-index="idx" wx:for-item="item" wx:key="{{ idx }}"> <view 阅读全文

posted @ 2020-04-25 09:15 ~快乐王子~ 阅读(3623) 评论(0) 推荐(1)

（五）微信小程序：模板template

摘要：模板Template 1.为什么要引入template？模板：在模板中定义代码片段，然后在不同地方调用实现：需要数据时引入时引入，不需要时则不必引入，达到代码的灵活性！ 2.创建模板目录结构：（1）news-template.wxml <template name="newsTemplate 阅读全文

posted @ 2020-04-24 22:00 ~快乐王子~ 阅读(605) 评论(0) 推荐(0)

（三）微信小程序：焦点轮播图功能

摘要：实现焦点轮播图（针对的是news页面） 1.在news的page文件中设置页面目的：为了让news的page页面和index登录页面达到统一的标题栏效果采取方案：此时添加成全局样式app.json为如图： 2.正式设计新闻的轮播图 1.导火线：设计轮播图需要采用API中的swiper组件，如图：阅读全文

posted @ 2020-04-24 16:15 ~快乐王子~ 阅读(1227) 评论(0) 推荐(0)

（二）微信小程序：实现页面跳转

摘要：实现页面跳转 1.快捷创捷另一个界面在全局的app.json中添加page目录news，如图： 2.在.wxml中的按钮添加事件明确响应的函数为newsHandler，然后在.js文件中进行函数设置 3.在.js文件中添加函数以下解释了什么是事件+事件的分类 //index.js Page({ 阅读全文

posted @ 2020-04-24 14:13 ~快乐王子~ 阅读(748) 评论(0) 推荐(0)

（一）微信小程序：实现引导页

摘要：基本目录结构 index目录下文件操作步骤 1.针对index.wxml  <view class="index-container"> <image src="../../image/logo.png"></image> <text class="username 阅读全文

posted @ 2020-04-24 12:05 ~快乐王子~ 阅读(4669) 评论(1) 推荐(0)

~快乐王子~

你要悄悄拔尖~然后惊艳出现

随笔分类 - 小程序

公告