微信小程序开发要点

1. js的引用
   被的JS中：

   //被引用js中
   
   //想要被其他js调用的方法或属性
   var local_data = [
       {
           name: john,
           age: 19
       },
       {
           name: mike,
           age: 29
       }
   ]
   function convertToStartsArray(starts){
       var num = starts.toString().substring(0,1);
       var array = [];
       for(var i=0;i<=5;i++){
           if(i<=num){
               array.push(1);
           }else{
               array.push(0);
           }
       }
       return array;
   }
   
   //将需要被调用的属性或方法放置在其中
   module.exports = {
       local_data: local_data,
       converToStartsArray: convertToStartsArray
   }

   引用其他JS属性或方法的JS文件：

   var utils = require("../../utils/util.js")
   
   Page({
       data: {
       
       },
       onLoad: function(event){
           var data = utils.local_data;
           var convertToStartsArray = utils.converToStartsArray;
       }
   })

    

2. 外部wxml和wxss的引用
   wxss使用@import引入外部样式文件：

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

   wxml使用<import src='' />引入外部wxml文件： 

   <import src='post-item/post-item-template.wxml' />
   
   <view>
     <!-- 轮播图 -->
     <swiper catchtap='onSwiperTap' vertical='{{false}}' indicator-dots='true' autoplay='true'>
       <swiper-item>
         <image src='/images/wx.png' data-post-id='3'></image>
       </swiper-item>
       <swiper-item>
         <image src='/images/vr.png' data-post-id='4'></image>
       </swiper-item>
     </swiper>
   </view>

    

3. 创建和使用模版
   创建模版：最外出使用<template name='模版名称'></template>标签，并使用“name“属性指定该模版引用名称

   //js代码
   <template name='postItem'>
     <view class='post-container'>
       <view class='post-author-date'>
         <image class='post-author' src='{{avatar}}'></image>
         <text class='post-date'>{{date}}</text>
       </view>
     </view>
   </template>
   
   //wxss代码，文件名为post-item-template.wxss
   .post-container {
     display: flex;
     flex-direction: column;
     margin-top: 20rpx;
     margin-bottom: 40rpx;
     background-color: #fff;
     border-bottom: 1px solid #ededed;
     border-top: 1px solid #ededed;
     padding-bottom: 5px;
   }

   使用模版：使用<template is='模版名称（name）'  data='{{data | ...data}}' />
   ——”{{data}}“为完整数据传入方式，模版内部引用的格式为data.xxx;
   ——“...data“为自动展开数据传入方式，模版内部引入的格式为xxx；

   //js代码
   <import src='post-item/post-item-template.wxml' />
   
   <view>
     <!-- 列表 -->
     <block wx:for='{{postList}}' wox:for-item='item'>
       <!-- template模版 -->
       <view catchtap='onPostTap' data-post-id='{{item.postId}}'>
         <template is="postItem" data='{{...item}}' />
       </view>
     </block>
   </view>
   
   
   //wxss代码
   @import 'post-item/post-item-template.wxss';
   
   swiper {
     width: 100%; 
     height: 600rpx;
   }

    

4.