前端学习——微信小程序

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

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文件中的

<template is="postItem" data="{{...item}}"></template>

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

如：

<text class='post-date'>{{item.date}}</text> 

可以将其改为

<text class='post-date'>{{date}}</text>

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

如何实现点击跳转呢？

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

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

Page({

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

    wx.redirectTo({
      url: '../posts/post',
    })
  }
  
})

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

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

二者区别：

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

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