微信小程序——表白墙 前台 开发整理

在这里插入图片描述


QQ 1285575001
Wechat M010527
技术交流 QQ群599020441
纪年科技aming


在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述- 引入了 一个 模版文件
在这里插入图片描述

  • 定义 template
    在这里插入图片描述
  • 使用 模版
    在这里插入图片描述
  • JS 文件加载数据
    在这里插入图片描述

在这里插入图片描述
- Navigation 页面链接
在这里插入图片描述

  • 自定义data-属性和获取值,url链接带参数和获取值
    在view里定义data-
    (为任意单词),绑定点击事件XXXX

<view class='XXXX' wx:for="{{taskLists}}" data-id='{{item.objectId}}' bindtap='XXXX'>

在js的XXXX里,利用e.currentTarget.dataset.*接收data-的值
XXXX:function(e){
var taskId = e.currentTarget.dataset.id;
wx.navigateTo({
url: 'xxxx/taskDetail?taskId=' + taskId,
})
},

url拼接字符串的方式为: url: 'xxxx/taskDetail?taskId=' + taskId
然后我们去到跳转的页面,通过onload函数就可以打印出传过来的参数啦:
onLoad: function (options) {
console.log(options)
},
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述在这里插入图片描述

  • 返回 index.wxml
    在这里插入图片描述

在这里插入图片描述

  • 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话
  • overflow-y: visible|hidden|scroll|auto|no-display|no-content;
    在这里插入图片描述
    在这里插入图片描述
    indicator-dots boolean false 否 是否显示面板指示点
    autoplay boolean false 否 是否自动切换
    interval number 5000 否 自动切换时间间隔
    duration number 500 否 滑动动画时长
    在这里插入图片描述在这里插入图片描述
  • 设置段落的最小高度

在这里插入图片描述

  • block标签
    并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性
    wx:if 添加到一个标签 判断

多个组件标签 使用一个 标签将多个组件包装起来,并在上边使用 wx:if 控制属性
在这里插入图片描述

  • 类似 block wx:if,也可以将 wx:for 用在标签上,以渲染一个包含多节点的结构块
    在这里插入图片描述在这里插入图片描述

  • swiper-item 仅可放置在swiper组件中,宽高自动设置为100%。
    item-id string 否 该 swiper-item 的标识符

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述

  • iconfont-字体图标 base64格式
    在这里插入图片描述
    把转换后下载的压缩包解压,把 stylesheet.css 中的@font-face引入自己的 css
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

wx.navigateTo(Object object)

保留当前页面,跳转到应用内的某个页面。
但是不能跳到 tabbar 页面。
使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
@keyframes 规则
在这里插入图片描述

app.js

在这里插入图片描述
const 限定一个变量不允许被改变,产生静态作用
require是运行时调用,所以require理论上可以运用在代码的任何地方
在这里插入图片描述

  • LeanCloud官方有很多教程,我们关注JavaScript相关的。

JavaScript SDK 安装指南 :
我们不用安装,只是为了直观的了解 LeanCloud 的一些界面、设置,比如,CDN加速 设置、LeanCloud的github。

数据存储入门教程 · JavaScript :
这里有个可操作的demo,由于Hexo主题中已经有关于LeanCloud的代码,我没有执行这个demo,
直接拿Hexo主题中的LeanCloud代码来测试。
其实为了更好的理解LeanCloud的知识,还是需要动手操作一下demo的。

数据存储开发指南 · JavaScript :
这篇是必读,如果是利用LeanCloud从头开发一些功能,就需要精读这篇帮助。
我只获取了一些基本信息,比如,WEB安全的设置、LeanCloud中的对象AV.Object和AV.File。
对象的创建、保存、读取,对象的属性获取,计数器相关的。
在这里插入图片描述在这里插入图片描述在这里插入图片描述

index.js

在这里插入图片描述

release 发布

在这里插入图片描述在这里插入图片描述在这里插入图片描述

发布了165 篇原创文章 · 获赞 3 · 访问量 2826

猜你喜欢

转载自blog.csdn.net/qq_33608000/article/details/103883146