前端学习——微信小程序

今天是学习微信小程序的第三天。

1. 一定要给脚本文件定义出口。如以下代码

var local_database = [{date: "Nov 18 2017",title: "我比你们多一个世界——魔兽世界",imgsrc: "/images/44.jpg",avatar: "/images/2.png",content: "《魔兽世界》(World of Warcraft)是由著名游戏公司
暴雪娱乐所制作的第一款网络游戏，属于大型多人在线角色扮演游戏。
游戏以该公司出品的即时战略游戏《魔兽争霸》的剧情为历史背景，
依托魔兽争霸的历史事件和英雄人物，魔兽世界有着完整的历史背景时间线。
玩家在魔兽世界中冒险、完成任务、新的历险、探索未知的世界、征服怪物等。",reading: "180",collection: "96",},{date: "Match 10th 2018",title: "炉石传说——真TM好玩",imgsrc: "/images/55.jpg",avatar: "/images/2.png",content: "《炉石传说:魔兽英雄传》是一款免费游戏，
故事背景基于魔兽争霸系列的世界观，玩家可以另行购买卡牌包。
游戏将首先在PC与苹果电脑平台发售，已推出iPad版本，
并在2015年4月登陆Windows、iPad以及安卓平台。",reading: "113",collection: "56",}
]

是一部分数据文件，用来传数据的。在这段代码最后要加上

module.exports = {postlist: local_database
}

这段语句的作用是：通过出口 exports 到别的脚本里去。与这个出口相对应的是：在相应的JS文件顶部，声明一个postsData变量，用require来接收。代码如下：

var postsData = require("../../data/posts-data.js");

随便声明了一个变量名，接收来自这个路径的js文件。

2.关于this.setData

在onLoad里面用this.setData方法来更新data这个绑定结构体里面的数据从而实现sh数据绑定。

提示：122100版本中，this.data做数据绑定的方法已失效。请在以后的所有数据绑定的地方，

使用this.setData

小程序总会读取data对象来做数据绑定，这个动作我们称之为动作A，而动作A的执行在onLoad事件之后。

3.绝对路径和相对路径的区别

绝对路径：从盘符开始的路径。如C:\windows\system32\cmd.exe

相对路径：从当前路径开始的路径。如当前路径为C:\windows

要描述上述路径，只需输入 system32\cmd.exe

4.template模版的使用

在.wxml中引用，用<import /> 如

< import src= "post-item/post-item-template.wxml"></ import >

在.wxss中引用，用@import 如

@import "post-item/post-item-template.wxss";

在post.wxml文件中的

给item前面加了... 这样在post-item-template.wxml中就不用给各个属性加上item。

如：

可以将其改为

回忆昨天的内容，昨天忘记做笔记了。出去吃饭很晚才回家，所以没写。

如何实现点击跳转呢？

给想要点击的组件加上 bindTap = "onTap";

之后再在xxx.js里面声明onTap就可以了。如下:

Page({onTap:function () {// wx.navigateTo({//   url: '../posts/post',// })wx.redirectTo({url: '../posts/post',})}})

用了两种方法来实现点击跳转。

 wx.redirectTo();和wx.navigateTo();

二者区别：

navigateTo表示保留当前页面，跳转到应用内的某个页面，可以返回到原页面。

redirectTo表示关闭当前页面，跳转到某个页面。

前端学习——微信小程序相关推荐

一个C#程序员学习微信小程序的笔记
一个C#程序员学习微信小程序的笔记客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在 ...
修复版拼团商城前端+后端微信小程序源码下载
1.怎么玩? 多人拼团,部分人获得得商品,没获得商品的人退款并瓜分红包,红包佣金从获得商品的人的订单利润里返. 2.参与拼团的人需要支付多少钱? 每个人需要支付商品规定的卖价金额,一元购模式的大家分担 ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
视频教程-老司机讲前端之微信小程序开发成语消消乐游戏视频课程-微信开发
老司机讲前端之微信小程序开发成语消消乐游戏视频课程中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3 ...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-陶国荣-专题视频课程...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-102人已学习课程介绍本课通过一个完整.真实的游戏项目,带着学员手动开发代码,本课分项目介绍.界面效果.技术分析.代码实现.打包 ...
微信小程序实现lot开发01 学习微信小程序 helloworld
最近走进一个新项目的任务里,主要的任务是实现用微信小程序利用websocket使用mqtt协议走网络控制继电器(其实在生活中这个技术已经普及了,我们用的充电桩扫码充电,我们学校里的饮水机扫码接水以及我 ...
0基础学习微信小程序(转载)
原文地址:https://blog.csdn.net/qq_41464123/article/details/105198163 前言微信小程序作为近几年"微服务"的杰出代表,应 ...
微信小程序最新开发资源汇总，对学习微信小程序的新手有一定帮助
微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序 ...
新手从零开始学习微信小程序开发01
新手从零开始学习小程序开发01 文章目录新手从零开始学习小程序开发01 前言一.什么是微信小程序? 二.如何着手学习微信小程序 1.开发工具下载安装 2.注册账户前言本章主要介绍微信小程序开发 ...

前端学习——微信小程序

前端学习——微信小程序相关推荐

最新文章

热门文章