08 微信小程序
微信小程序学习笔记
傅晨明
毕业于杭州电子科技大学
展开
-
微信小程序数据填充新闻详情页面
微信小程序带参的页面跳转微信小程序新闻详情页面效果实现上面已经实现了页面的跳转和详情页效果实现,接下来将数据填充到详情页面post-detail.js 中引入posts-data.js,posts-data.js中有所有数据信息。// pages/post/post-detail/post-detail.jsvar postsData = require('../../../data/...原创 2020-03-10 17:50:28 · 2581 阅读 · 0 评论 -
微信小程序带参的页面跳转
微信小程序构建新闻列表微信小程序template模板的使用微信小程序新闻详情页面效果实现在之前实现了新闻列表页和详情页的效果,接下来需要从列表页点击item跳转到详情页,并携带item的postId。post.wxml中添加onPostTap事件,并携带postId <view bindtap="onPostTap" data-postId="{{item.postId}}"&g...原创 2020-03-10 16:02:00 · 1005 阅读 · 0 评论 -
微信小程序新闻详情页面效果实现
<!--pages/post/post-detail/post-detail.wxml--><!--先静后动,先样式再数据--><view class="detail-container"> <image class="head-image" src="/images/post/vr.png"></image> <vi...原创 2020-03-10 14:49:58 · 7919 阅读 · 0 评论 -
微信小程序template模板的使用
文章目录新建模板移植代码到模板中引入模板使用模板参考: 模板WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。这里我们使用模板template改写微信小程序构建新闻列表中的示例代码新建模板新建post-item-template目录,并创建post-item-template.wxml和post-item-template.wxss文件移植代码到模...原创 2020-03-10 11:12:38 · 1494 阅读 · 0 评论 -
微信小程序的模块化
模块化模块化:可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。使用微信小程序构建新闻列表的代码来讲解模块化创建data目录,新建posts-data.js文件posts-data.js 代码如下:var local_database = [ { date: "Sep 18...原创 2020-03-09 23:54:21 · 1414 阅读 · 0 评论 -
微信小程序的事件机制
事件详解wx.redirectTo<view class="journey-container" bindtap="onTap"> <text class="journey">开启小程序之旅</text> </view>// pages/welcome/welcome.jsPage({ onTap: function (e...原创 2020-03-09 22:51:25 · 144 阅读 · 0 评论 -
微信小程序构建新闻列表
实现如下:<view> <swiper indicator-dots="true" autoplay="true" interval="2000"> <swiper-item> <image src="/images/wx.png"></image> </swiper-item> &...原创 2020-03-09 22:24:31 · 1610 阅读 · 0 评论 -
微信小程序swiper
swiperswiper-item先看一段代码<swiper style="width:100%;height:500rpx"> <swiper-item style="background-color:#ff6900"> <image src="/images/wx.png" ></image> </swiper-it...原创 2020-03-05 21:53:56 · 313 阅读 · 0 评论 -
微信小程序欢迎页面效果实现
welcome.wxml<view class="container"> <image class="avatar" src="/images/avatar/1.png"></image> <text class="motto">Hello, 微信</text> <view class="journey-contai...原创 2020-03-05 15:45:11 · 3114 阅读 · 0 评论 -
微信小程序Storage缓存
Storage微信小程序歌曲列表页实现中实现了歌曲列表,因为歌曲列表中包含了歌曲信息,所以我们将歌曲列表数据保存在缓存中,这样在歌曲播放页就不需要重新请求数据,同时从播放页返回歌曲列表页也不需要重新请求数据。只需在请求云函数成功后调用以下方法即可全部代码如下:// pages/musiclist/musiclist.jsPage({ /** * 页面的初始数据 */...原创 2020-03-03 10:41:01 · 1357 阅读 · 0 评论 -
微信小程序歌曲列表页实现
文章目录页面跳转添加云函数路由musiclist自定义组件歌曲列表页面实现微信小程序组件化实现歌单效果微信小程序的上拉加载与下拉刷新微信小程序路由改造以上三篇文章实现了歌单页面,并对云函数进行了路由改造,接下来完成歌曲列表页。歌单效果:页面跳转点击歌单项,需要将歌单id传递给歌曲列表页,每个歌单项是通过自定义组件实现的,所以需要在歌单playlist组件中实现跳转和参数传递在pl...原创 2020-03-02 18:10:08 · 5107 阅读 · 0 评论 -
微信小程序自定义编译模式
在编辑其他页面的时候每次保存,调试的页面都会返回到index页面。 可以设置微信小程序编译模式设置解决。原创 2020-03-02 16:41:45 · 5659 阅读 · 0 评论 -
微信小程序路由改造
一个用户在一个云环境中只能创建50个云函数,我们可以在一个云函数中创建多个路由,从而可以减少云函数个数。微信小程序的上拉加载与下拉刷新文章中通过调用云函数实现了歌单的功能,现在通过路由tcb-router对其进行改造右键music云函数,点击在终端打开输入以下命令,安装tcb-routernpm install --save tcb-routermusic云函数的js文件修改如下...原创 2020-03-02 14:10:28 · 591 阅读 · 0 评论 -
微信小程序云函数路由优化tcb-router
TencentCloudBase/tcb-router一个用户在一个云环境中只能创建50个云函数相似的请求归类到同一个云函数处理tcb-router是一个koa风格的云函数路由库koa洋葱模型tcb-router:基于 koa 风格的小程序·云开发云函数轻量级类路由库,主要用于优化服务端函数处理逻辑云函数端使用新建tcbrouter云函数右键-在云端中打开npm in...原创 2020-03-02 11:07:49 · 3620 阅读 · 3 评论 -
微信小程序的上拉加载与下拉刷新
文章目录数据库get模板编写云函数调用云函数上拉加载和下拉刷新这里需要使用微信小程序组件化实现歌单效果中实现的歌单效果。通过调用云函数,从云数据库中请求需要的歌单数据。在我的云数据库中已经存在了一个名为playlist的集合,如下:数据库get模板从云数据库的playlist中获取15条数据db.collection('playlist') .skip(0) .limit(...原创 2020-03-01 20:36:20 · 2061 阅读 · 0 评论 -
微信小程序云函数和云数据库
数据库request-promiseRequest-Promisenpm install --save requestnpm install --save request-promise原创 2020-03-01 11:17:01 · 4008 阅读 · 4 评论 -
微信小程序async/await
async 函数小程序中使用async需要引入facebook的 runtime.js async foo() { console.log('foo') return 1 }, console.log(this.foo())结果:说明async是一个Promise对象。async/await使用:async foo() { console.l...原创 2020-02-28 19:14:24 · 507 阅读 · 0 评论 -
微信小程序Promise示例
文章目录PromisePromise.all()示例Promise.race()示例PromisePromise 对象Promise对象代表一个异步操作,有三种状态:pending(进行中)fulfilled(已成功)rejected(已失败)Promise.all()示例Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。...原创 2020-02-28 16:30:29 · 1848 阅读 · 0 评论 -
微信小程序wx:key使用
demo.wxml :<block wx:for="{{arr}}" wx:key="*this" wx:for-item="data" wx:for-index="idx"> <view> <checkbox/>{{data}}</view></block><button bind:tap="sort">随...原创 2020-02-28 15:07:42 · 3551 阅读 · 0 评论 -
微信小程序组件化实现歌单效果
需要实现的效果如下:我们将歌单的每一项作为一个组件。playlist组件新建components目录,并在其目录下新建playlist目录,然后右键 - 新建Component,输入playlist,自动为我们创建了playlist组件。playlist组件如下:playlist.wxml:<view class="playlist-container" bind:tap=...原创 2020-02-27 22:34:02 · 1762 阅读 · 1 评论 -
微信小程序的项目结构搭建
ssssssssssssssss原创 2020-02-27 17:46:27 · 730 阅读 · 1 评论 -
微信小程序基础
文章目录1. ⼩程序配置⽂件1.1.全局配置app.json 1.1.1.tabbar1.2.⻚⾯配置page.json 1.3.sitemap配置-了解即可2.模板语法 2.1.数据绑定 2.2.运算2.3.列表渲染2.4.条件渲染3. 事件绑定1. ⼩程序配置⽂件⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和⻚⾯⾃⼰的 ...原创 2020-02-26 14:22:50 · 752 阅读 · 0 评论 -
微信⼩程序简介
文章目录1.微信⼩程序介绍1.1.为什么是微信⼩程序? 1.2.微信⼩程序历史 1.3.疯狂的微信⼩程序 1.4.还有其他的⼩程序不容忽视 1.5.体验 2.环境准备2.1.注册账号 2.2.获取APPID 2.3.开发⼯具 3.第⼀个微信⼩程序3.1.打开微信开发者⼯具 3.2.新建⼩程序项⽬3.3.填写项⽬信息4. 微信开发者⼯具介绍5. ⼩程序...原创 2020-02-24 15:40:27 · 702 阅读 · 0 评论