美文网首页
小程序学习（01）——template模块化

小程序学习（01）——template模块化

作者: 默色留恋 | 来源:发表于2019-01-14 16:59 被阅读0次
文件夹有.json的别忘记在json文件里输入" () "，不然会报错
文件夹有.js的别忘记在js文件里输入" page({}) "，不然会报错
wxss尽量使用rpx，起到自适应效果 一般1px=2rpx
app.json
{
  "pages":[
    "pages/welcomes/welcome", //页面第一个显示
    "pages/posts/post"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#b3d4db",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
微信截图_20190114163610.png
welcome引导页
welcome.wxml
<!--pages/welcomes/welcome.wxml-->
<view class='welcomes'>
  <image src='/images/avator.jpg'></image>
  <text class='text_wel'><text>Hello,</text><text class='color_red'>sunny</text></text>
  <!-- 冒泡事件 -->
  <view  class='btn_start' bindtap='onalltap'>
    <!-- 阻止冒泡catchtap -->
    <text catchtap='ontap'>开启小程序之旅</text>
  </view>
</view>
welcome.wxss (略)
welcome.js
// pages/welcomes/welcome.js
Page({
  ontap: function () {
    wx.redirectTo({
      url: '../posts/post',
    })
  }
})
posts新闻列表页
post.wxml
<!-- 引入template模块 -->
<import src="post-item/post-item-template.wxml" />

<view>
  <swiper class='container-swiper' indicator-dots="true" autoplay="true" interval="2000">
    <swiper-item><image src='/images/timg.jpg'></image></swiper-item>
    <swiper-item><image src='/images/timg2.jpg'></image></swiper-item>
    <swiper-item><image src='/images/timg3.jpg'></image></swiper-item>
  </swiper>
</view>
<view>
  <!-- wx:if="{{}}" 显示隐藏 -->
  <!-- <text>{{"Hello"+content}}</text> 字符串拼接-->
  
  <!-- <block>只起到标签包裹作用 -->
  <block wx:for="{{postList}}" wx:for-item="item">
    <!-- is与template模块里的name相对应
    data是数据传递 -->
    <template is="postItem" data="{{item}}" />  
  </block>
</view>
post-item-template.wxml
<!-- 模块化组件 -->
<template name="postItem">
  <view class='post-container'>
    <view class='post-author-date'><image src='{{item.avatar}}'></image><text>{{item.date}}</text></view>
    <view class='post-title'><text>{{item.title}}</text></view>
    <view class='post-image'><image src='{{item.imgsrc}}'></image></view>
    <view class='post-content'><text>{{item.content}}</text></view>
    <view class='post-like'>
      <image src='/images/img2.jpg' class='post-like-image'></image>
      <text class='post-like-font'>{{item.reading}}</text>
      <image src='/images/img.jpg' class='post-like-image'></image>
      <text class='post-like-font'>{{item.collection}}</text>
    </view>
  </view>
</template>
post.wxss (略)
/* 引入wxss文件 */
@import "post-item/post-item-template.wxss";

.container-swiper{
  width: 100%;
  height:421rpx;
}
swiper-item image{
  width: 100%;
  height:421rpx;
}
post.js
var postdata = require('../../data/posts-data.js'); //必须是相对路径

Page({
    data: {

     },
    onLoad: function (options) {

    // this.data.postList = postdata.postList;

    this.setData({
      postList: postdata.postList
    });
    // 触发事件，执行函数，更新数据，同时可以实时更新渲染界面。
  },
})

相关文章