微信小程序之 var和let区别:
 
一.用var的方式声明的变量，为全局变量，其作用域为所在的函数内。所以重点来了，在当前JS文件的其余函数中，如果直接拿来用，也会报变量未定义的错误。详情请看下面的var的错误使用方式。
 
案例如下：
 

Page({

  data: {

    name: '新增参保人',// name的默认值

  },

  addPerson: function (event) {

    // this.data.name = '保存'

    this.setData({

      name: '保存'

    })



  },

  onLoad() {

    console.log('App onLoad');

    // 用var的方式声明的i在onLoad函数内都有效，在其余函数中是没有效果的哦。

    for (var i = 0; i < 10; i++) {

      console.log('for循环里面的i的值为' + i);

    }

    console.log('onLoad函数中i的值' + i);

  },

})

var的错误使用方式
在index.js文件的addPerson:函数中，打印在onLoad函数中声明的var变量i，就会报报变量i未定义的错误。

Page({

  data: {

    name: '新增参保人',// name的默认值

  },

  addPerson: function (event) {

    // this.data.name = '保存'

    this.setData({

      name: '保存'

    })

    console.log('addPerson函数中i的值'+i);

  },

  onLoad() {

    console.log('App onLoad');

    for (var i = 0; i < 10; i++) {

      console.log('for循环里面的i的值为' + i);

    }

    console.log('onLoad函数中i的值' + i);

  },

})

当然，如果你想 用var声明的i在addPerson类中也可以使用的话，那么你可以用this.data.i = i;将i存储在index.js整个文件中

Page({

  data: {

    name: '新增参保人',// name的默认值

  },

  addPerson: function (event) {

    // this.data.name = '保存'

    this.setData({

      name: '保存'

    })

    console.log('addPerson函数中i的值'+this.data.i);

  },

  onLoad() {

    console.log('App onLoad');

    for (var i = 0; i < 10; i++) {

      console.log('for循环里面的i的值为' + i);

    }

    console.log('onLoad函数中i的值' + i);

    this.data.i = i;

  },

})

二.用let的方式声明的变量，为局部变量，该变量只会在最靠近{ }内的范围有效，出了{}之后，该变量就不能够再用了，否则会报该变量未定义的错误。也就是说，该变量的作用域为所在的代码块内。

//index.js

//获取应用实例

const app = getApp()



Page({

  data: {

  },



  onLoad: function () {

    console.log('App onLoad');



    // 用let的方式声明的i只在for循环内有效，在for循环外引用就会报错i未定义的错误

    for (let i = 0; i < 10; i++) {

      console.log('for循环里面的i的值为'+i);

    }

    console.log(i);

  },

})

 
原文链接：https://www.jianshu.com/p/e62d4ee72a61

微信小程序module.exports模块化操作实例项目操作：
 
 
一。定义公共JS，common.js
 

var studentList = [

  {

    name: "xiaoming",

    age: "22",

    hobby: "sleep"

  },

  {

    name: "xiaohong",

    age: "22",

    hobby: {

      one: "eat",

      two: "eatfood"

    }

  }

]

//模块化

module.exports = {

  studentList: studentList

}

2.应用层JS
 

var common = require("../aa/common.js")

//获取应用实例

var app = getApp()

Page({

 data: {

 },

 onLoad: function () {

  this.setData({

    studentList:common.studentList

    });

 }

})

3.应用模板中调用，index.wxml
 

<block wx:for="{{studentList}}" wx:for-item="item" wx:for-index="idx">

    <view>

     {{item.name}}

    </view>

</block>

最后输出的是xiaoming 和xiaohong
 

小程序-调用 app.js公共js对象方法及公共变量：
 
1.公共js定义的方法：

//app.js小程序公共入口文件

App({

  // 自定义方法

  productshead:function(){

    return "公共js调用方法headertxt"}

   

})

2.子页面js:

//调用公共js对象以便调用其方法

var app = getApp();//获取应用实例

// console.log(app)//可查看公共js（app.js）的方法

Page({

  data: {

  "headtxt":app.productshead()//调用公共appjs的方法

  }

})

小程序前端模板开发教程之<七>微信小程序页面引入公共头部和尾部：
 
第一步：在pages目录下面新建一个templates目录，新建footer文件，如下图

第二步：footer.wxml文件下编写代码如下：name 是template的属性，作为模板的名字。

第三步：现在我们在pages/index/index.wxml里面引用这个模板。

<import src="../templates/footer"/>

<template is="footer"></template>

ok,现在就能在各个小程序模板页面引用这个尾部了，头部一样的原理。
 
漂泊者博客原创，转载请标明出处。

小程序前端模板开发教程之<六>flex(flexible box)弹性盒子常用功能介绍：
 
flex(flexible box)弹性盒子

一.排序
设置CSS样式为display:flex;才为弹性容器。如果设置了display:flex;再定义display:block属性，不起作用，弹性容器里块状属性消失。flex容器将消除item的块状特性。

flex-direction:column;(列排序）容器下的子元素垂直排序;

flex-direction:row;(行排序)容器下的子元素水平排列。

flex-direction:row-reverse;(行倒序排列，对齐方向也会颠倒，如原来靠左对齐，reverse之后，靠右对齐）

flex-direction:column-reverse;(列倒序排列，对齐方向也会颠倒，如原来靠上对齐，reverse之后，靠下对齐）

view 不指定宽高时，默认宽度100% 高度自适应。

二.flex对齐方向：

justify-content:flex-end;设置reverse时居左，居上对齐，没设置reverse时，居右，居下对齐。

justify-content:flex-start;设置reverse时居右，居下对齐，没设置reverse时，居左，居上对齐。

justify-content:center;居中显示

justify-content:space-between;平均分布显示效果

justify-content:space-around;等距分布

三.主轴，交叉轴

什么时候是主轴，什么时候是交叉轴，取决于flex-direction的值，如果值是column 垂直就是主轴，如果是row，则水平是主轴。

justify-content:center;主轴居中显示

align-items:center;交叉轴居中显示

align-items:stretch;交叉轴的拉伸，在容器不设置高度时起作用。

align-items:baseline;每个子元素的基线对齐，第一个文字的底线对齐。

四.换行

flex-wrap:nowrap;(不换行)

flex-wrap:wrap;(换行）

小程序前端模板开发教程之<五>常用wxss样式介绍：
 
1.尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。

rpx 与 px单位换算如下：


2.样式导入

可以使用@import语句来导入外联样式表，其后面跟需要导入外联样式表的相对路径，并以分号结束。

例如：

/** other.wxss **/

.appText{

  margin:10px;

}

/** app.wxss **/

@import "other.wxss";

.content_text:{

  margin:15px;

}

app.wxss是全局样式，作用于每一个页面，而page下的每一个的wxss文件只作用于当前页面，并对全局样式中的相同属性会覆盖。

对于微信小程序wxss样式的使用来说，其实大部分都和css样式一致，下面简单的进行介绍一下：
 














 
 

小程序前端模板开发教程之<四>wxml八大类基础组件:
 



 

小程序前端模板开发教程之<三>小程序项目的新建从零开始app.json配置：
 
新建全局文件app.json

{
    "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
}

这里面的每一条，对应着一个页面，就按照这个格式写，不要写错，注意最后一条没有逗号。第一条，会显示在左边演示界面中，也就是说，想调试哪个页面，就把哪个页面的路径移到最上方。
写完之后，保存.
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#07bb45",
    "navigationBarTitleText": "漂泊者博客",
    "navigationBarTextStyle":"write",
    "navigationStyle":"default",
    "backgroundColor":"#ffffff",
    "enablePullDownRefresh":false
  }

navigationBarBackgroundColor 导航栏背景颜色

navigationBarTextStyle 导航栏标题颜色，仅支持 black / white

navigationBarTitleText 导航栏标题文字内容

navigationStyle  导航栏样式，仅支持以下值：default 默认样式  custom 自定义导航栏，只保留右上角胶囊按钮

backgroundColor 窗口的背景色

enablePullDownRefresh 是否开启当前页面的下拉刷新。默认为false

小程序前端模板开发教程之<二>小程序项目的基本结构：
 
1.全局基础文件

app.json

app.wxss

app.js

project.config.json  小程序环境配置文件，有没有它都可以正常运行。

2.项目文件(pages)

index.js

index.wxml

index.wxss

index.json(可有可无)

3.utils(自定义文件夹)

utils.js