初探小程序小程序的发现越来越势不可挡，作为前端开发者当然也不能忽略这项技能，最近刚好应朋友需求，跟他一起做个小程序。So

前言

小程序的发现越来越势不可挡，作为前端开发者当然也不能忽略这项技能，最近刚好应朋友需求，跟他一起做个小程序。So，我开始接触小程序，然后把自己的点点滴滴记录下来，供大家观摩，如果不妥的地方，欢迎来捶。

！！内容基本来时官方文档，只是自己稍微做下整理及自己的理解，然后顺便分享。

整体结构

小程序文件结构主要包括四种 wxml（页面结构）、js（页面逻辑）、wxss（页面样式）、json（页面配置）组成。

1、项目目录结构

2、app.json ---》用来配置当前小程序的所有路由

{
  "pages":[
    "pages/index/index", //默认为打开的首页，路由配置就是其对应的文件路径
    "pages/logs/logs"
  ],
  "window":{//设置小程序所有页面顶部背景颜色。文字颜色
    "backgroundTextStyle":"light",//下拉 loading 的样式
    "navigationBarBackgroundColor": "#fff",//导航栏背景颜色
    "navigationBarTitleText": "WeChat",//导航栏标题颜色
    "navigationBarTextStyle":"black"//导航栏文字颜色
  },
  "tabBar": {//底部菜单栏设置
    "color":"red",//设置字体颜色   还可以设置其他很多样式
    "list": [{
      "pagePath": "pages/index/index",//点击路由
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {//设置网络超时时间，默认都是60000毫秒
    "request": 10000, //请求
    "downloadFile": 10000//文件下载
  },
  "debug": true //是否开始debug模式
}

这就是app.json文件的介绍，非常的清晰明了，一次过掉没什么问题。

3、JS（逻辑层）的语法

3.1、数据绑定 {{}}

//index.wxml
<view> {{ message }} </view> 
//页面使用js里的面变，用双打括号

<view id="item-{{id}}"> </view>
//

//index.js
Page({    //创建每个js都是这个创建，为一个Page({})
  data: { //定义当前页面的变量及初始值
    message: 'Hello MINA!'，
    id:0
  }
})

3.2、逻辑判断 wx:if

<view wx:if="{{length > 5}}"> </view>
//使用wx:if  wxml 中无论是执行判断语句，还是控制true或false属性都要用双引号之内

<view>{{"hello" + name}}</view>

3.3、字符串运算 {{""}}

<view>{{"hello" + name}}</view>
//这个较为简单，就是直接在双打括号中执行就好了

3.4、遍历数组 wx:for

<view wx:for="{{[0, 1, 2, 3, 4]}}"> {{item}} </view>
/*
  结果：0, 1, 2, 3, 4
*/
//wx:for="{{准备遍历的数组}}"

3.5、app.js 的内容生命周期

//app.js 用来整个项目的的初始化、启动关闭的监听及一些请求配置的设置。
App({
  onLaunch: function(options) {
    //当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
    // Do something initial when launch.
  },
  onShow: function(options) {
  //当小程序启动，或从后台进入前台显示
      // Do something when show.
  },
  onHide: function() {
  //当小程序从前台进入后台
      // Do something when hide.
  },
  onError: function(msg) {
  //当小程序发生脚本错误
    console.log(msg)
  },
  //设置全局变量
  globalData: 'I am global data'
})


other.js
var app = getApp(); //全局获取小程序实例
console.log(app.globalData);  // I am global data

3.6、js的模块化，及设置公共的js工具用

//common.js

function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}
//这是官方给的例子
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

//但是，我更喜欢的写法是到处一个对象的形式
module.exports = {
  sayHello:sayHello,
  sayGoodbye:sayGoodbye
}


//other.js //应用时
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

4、WXML（结构层）的语法

在视图层页面，小程序需要用小程序规范里的标签才有效，所以我们只要了解这些标签的使用就可以了。小程序标签（组件）那我这边主要稍微介绍下一些关于标签的上事件的使用。因为运用在移动端，所以事件与web端（onclick...）不同。小程序的标签事件用户bind绑定，主要有bindtap(点击)、bindlongtap(长按)、bindtouchstart(手指触摸)、bindtouchcancel(手指触摸动作被打断，如弹窗和来电提醒)、bindtouchmove(手指触摸后移动)、bindtouchend(手指触摸动作结束)


//index.wxml
<view  bindtap="tapName"> Click me! </view>

//index.js
Page({
  tapName: function(event) {
    console.log(event)
  }
})

//每个事件都有一个event参数， 可以获取到这个事件的大致信息。

总结

其实如果写过vue或react的小伙伴看在看小程序是非常熟悉，只是写法上有所不同而已，本来想介绍下API部分，但是发现API部分内容很多，其实当我们真正有需要的时候去看下，基本就OK了，所以小程序我个人觉得还不很难，下次再写这个的话，我会附上点自己的例子及效果图。给大家直观的感觉，所以本期的初探小程序就大家介绍这些了。