微信小程序·前端-锦囊

==========================

flex【盒子】

 

display: flex;

flex-direction: column;　　【从上到下排列】↓

justify-content: center;　　　【距上方  和距下边 ——  距离一致】

align-items: center;　　　　【距左+距右——  距离一致】

 

opacity: 0.8;　　　　　　　　【不透明度】

 

 

 

flex-direction: row;

vertical-align: middle;

==========================

 

数组：

console.log(postData.postList);

 

wx.setStorageSync('key', "这是缓存")

【不能超过10MB】

//清除所有缓存

wx.clearStorageSync()

wx.removeStorageSync('key')

 

 格式化代码：alt+shift+f

脚本文件运行，不运行的

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

注意最后的【/】（结尾符合）

引入文件

css;

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

 

var postData = require('../../../data/post-data.js')

{{...item}}" />　　　　...为展开

======================================================

判断使用三元表达式：

 

<image class='audio' catchtap='onMusicTap' src="{{isPlayingMusic?'https://myphp.vip/img/wx/music/music-stop.png':'https://myphp.vip/img/wx/music/music-start.png'}}"></image>

<!-- <image wx:if="{{isPlayingMusic}}" class='audio' catchtap='onMusicTap' src="https://myphp.vip/img/wx/music/music-start.png"></image> -->

<!-- <image wx:else="{{isPlayingMusic}}" class='audio' catchtap='onMusicTap' src="https://myphp.vip/img/wx/music/music-stop.png"></image> -->

 

 --------------

大【target】和【currentTarget】

target指的是当前点击的组件 　　　　和 currentTarget 指的是时间捕获的组件

target这里只的是image,而currentTarget 指的是swiper

 

 

onBannerTap:function(event)

{

console.log(event);

var postId = event.currentTarget.dataset.postid;　　　　　　（）

wx.navigateTo({

　　url: "post-detail/post-detail?id=" + postId

})

}

 

 

 

======================================================

命名规范：

date:

title

imgSrc

avatar:

content:

reading:

collection

 

 

 

 

 

 

 

 

 

=======================================================

<!-- Banner轮播图 start -->

<view>

<swiper autoplay="true" indicator-dots="true" circular='true' interval="1500" >

<swiper-item>

<image src='{{muke.image1}}'></image>

</swiper-item>

<swiper-item>

<image src='{{muke.image2}}'></image>

</swiper-item>

<swiper-item>

<image src='{{muke.image3}}'></image>

</swiper-item>

</swiper>

</view>

<!-- Banner轮播图 end -->

 

<block wx:for="{{post_key}}" wx:for-item="item" wx:for-index="ids">

{{ids}}　　为索引

{{item}}　　为值

{{item.image}}

</block>

 

 

 

<view>

<View style="width:100%">

<text style='color:red;margin-left:150rpx;'>

【柴静雾霾调查：穹顶之下(完整版)】

</text>

</View>

<view >

<video style="width: 100%;height=400px;margin:1px;" src="{{video}}" binderror="videoErrorCallback"></video>

</view>

</view>

----------------------------

this.setData({

post_key:post_content

}),

 

 

template模板：

 

 

<!-- 新闻内容 start -->

<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="ids">

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

</block>

<!-- 新闻内容 end -->