微信小程序实战讲解所遇到的知识点

1.通过module.exports的方法来实现数据的共享

场景：一般数据都是在一个页面的js文件的data对象里面，然后通过初始化的方法把数据放进去。但是这样的话js的文件就会显得很囊肿，我们可以把数据抽出来专门放一个文件里面，然后暴露到外面，再然后接收这个数据，再把数据塞进data对象中。

比如下面这个是抽出的数据js

注：每个js页面都有一个moduel对象。

post-data.js

var post_data = [{
post_author_img: "../image/avator/1.png",
post_date: "Nov 五月wqwqwwq",
post_title: "第ISIS巨大的静安寺卡死",
post_image: "../image/post/crab.png",
post_content: "哈哈哈我也遇到了这样的情况，然后我是看到别人说重新安装是不会报错的，但是我的还是会，所以我就安装了之前的版本的开发工具，没有报错了，可能是新版本的开发工具的问题吧",
post_like_image1: "../image/icon/chat.png",
post_like_font1: "92",
post_like_image2: "../image/icon/view.png",
post_like_font2: "65"
}, {
post_author_img: "../image/avator/1.png",
post_date: "Nov 五月",
post_title: "第ISIS巨大的静安寺卡死",
post_image: "../image/post/crab.png",
post_content: "我也遇到了这样的情况，然后我是看到别人说重新安装是不会报错的，但是我的还是会，所以我就安装了之前的版本的开发工具，没有报错了，可能是新版本的开发工具的问题吧",
post_like_image1: "../image/icon/chat.png",
post_like_font1: "92",
post_like_image2: "../image/icon/view.png",
post_like_font2: "65"
}, {
post_author_img: "../image/avator/1.png",
post_date: "Nov 五月",
post_title: "第ISIS巨大的静安寺卡死",
post_image: "../image/post/crab.png",
post_content: "我也遇到了这样的情况，然后我是看到别人说重新安装是不会报错的，但是我的还是会，所以我就安装了之前的版本的开发工具，没有报错了，可能是新版本的开发工具的问题吧",
post_like_image1: "../image/icon/chat.png",
post_like_font1: "92",
post_like_image2: "../image/icon/view.png",
post_like_font2: "65"
}
]

//通过module对象的exports方法把数据暴露出来
module.exports={
"post_data": post_data
}

post.js

在需要数据的js上方加上这一条
var post_val = require("../data/post-data/post-data.js");

Page({

/**
* 页面的初始数据
*/
data: {

},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 第一种赋值方法
this.setData({
post_key: post_val.post_data
})
// 第二种赋值方法
//this.data.post_key = post_val.post_data;
console.log(this.data.post_key.post_data)
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

2.小程序的模板的使用方法

1.创建好模板的wxml和wxss

2.模板顶层需要由包围，还需要设置name值，以后调用

3.需要在用到wxml和wxss的文件中引入即可。

看代码

模板

<template name="post-item-template">
<view class='post-container'>
<view class="post-author-date">
<image class="post-author" src='{{item.post_author_img}}'></image>
<text class="post-date">{{item.post_date}}</text>
</view>
<text class='post-title'>{{item.post_title}}</text>
<image class='post-image' src='{{item.post_image}}'></image>
<text class='post-content'>{{item.post_content}}</text>
<view class='post-like'>
<image class='post-like-image' src='{{item.post_like_image1}}'></image>
<text class='post-like-font'>{{item.post_like_font1}}</text>
<image class='post-like-image' src='{{item.post_like_image2}}'></image>
<text class='post-like-font'>{{item.post_like_font1}}</text>
</view>
</view>
</template>

模板的wxss

.post-author-date{
margin:10rpx 0 20rpx 10rpx;
}

.post-author{
width:60rpx;
height: 60rpx;
vertical-align:middle;
}

.post-date{
margin-left: 20rpx;
vertical-align:middle;
margin-bottom: 5px;
font-size: 26rpx;
}

.post-title{
font-size: 34rpx;
font-weight: 600;
color: #333;
margin-bottom: 10px;
margin-left: 10px;
}

.post-image{
margin-left: 16px;
width: 100%;
height: 340rpx;
margin: auto 0;
margin-bottom: 15px;
}

.post-content{
color: #666;
font-size: 28rpx;
margin-bottom: 20rpx;
margin-left: 20rpx;
letter-spacing: 2rpx;
line-height: 40rpx;
}

.post-like{
font-size: 13px;
flex-direction: row;
line-height: 16px;
margin-left: 10px;
}

.post-like-image{
height: 16px;
width: 16px;
margin-right: 8px;
vertical-align:middle;
}

.post-like-font{
vertical-align: middle;
margin-right: 20px;

}

引入模板

<import src="post-item/post-item-template.wxml" />
<view>
<swiper indicator-dots="true" indicator-color="#666" autoplay="true" interval='2000'>
<swiper-item>
<image src="../image/wx.png"></image>
</swiper-item>
<swiper-item>
<image src="../image/vr.png"></image>
</swiper-item>
<swiper-item>
<image src="../image/iqiyi.png"></image>
</swiper-item>
</swiper>
<block wx:for="{{post_key}}" wx:for-item="item">
//is后面是模板的name值   data是模板里面需要的数据值
<template is="post-item-template" data="{{item}}" />
</block>
</view>

wxss同样需要引入模板的wxss

@import 'post-item/post-item-template.wxss';
swiper{
height:500rpx;
width:100%
}

swiper-item image{
width:100%;
height:500rpx
}

.post-container{
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-bottom: 40rpx;
background: #fff;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
padding-bottom: 5px;
}

实现页面的跳转

1.首先给按钮绑定点击事件

2.在对应的js中写事件函数

绑定点击事件
<text class="moto" bindtap='entry'>开启小程序之旅</text>

在page里面写事件函数
entry:function(){
wx.navigateTo({
url: '../posts/post',
})
}

设置自定义属性并得到属性的值

自定义属性自己可以任意设置，前提是必须data-开头的，这样小程序才有api得到值

比如设置的data-postID属性，注意，只要不是-分割的变量名，小程序自动会全部变为小写，虽然你设置的属性名是postID，但是你后台得到的是postid。这点注意一下

<block wx:for="{{post_key}}" wx:for-item="item">
<view catchtap='entryDetail' data-postID='{{item.postID}}'>
<template is="post-item-template" data="{{item}}" />
</view>
</block>

js获取
entryDetail:function(event){
var postid = event.currentTarget.dataset.postid
console.log(event.currentTarget.dataset.postid)
wx.navigateTo({
url: 'post-detail/detail?id=' + postid,
})
},

detail页面如何获取到呢？
通过detail的js文件的onload方法里面的options属性
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options.id)
},