微信小程序-项目结构

一直在“说”学习微信小程序，但是一直没有学习

为什么会有这个“想法”要学习微信小程序？

因为在过去的某一天，看到了一句话。

苹果的 APP Store，微信的小程序,都是程序员“把自己的同一份时间出售很多次”的绝佳渠道。

在这里验证了一句话：从想法到实践，很难

学习微信小程序，是可以产生睡后收入的。所以这是我学习的动机。

说了一大推废话。下面开始正文。

什么是微信小程序
官网的解释：

小程序是一种全新的连接用户与服务的方式，他可以在微信内被便捷得获取和传播，同时具有出色的使用体验

当微信事实上，连接了这么多用户的时候，成为一个现象级的APP，基于微信的创业，也就意味这你有了巨大的用户量。

小程序官网：wechat
微信相关文档：doc

本文结构：
1.微信开发者工具 简单介绍
2.创建小程序项目
3.项目结构
4.结构文件类型之间的关联

微信开发者工具介绍

下载地址：官网-下载

在创建时，需要填写开发者ID。开发者ID，需要去注册

在创建时，选择一个空文件夹
创建完以后的目录如下：

项目结构

一个基本的page包含四种类型的文件。

.js      函数
.json  静态数据，在小程序环境中是这样定义
.wxml  xml文件
.wxss  样式文件

页面加载时，json中的数据初始化，js可以处理，wxml可以加载到页面。wxss美化页面。
以上四个文件，分为全局配置文件，和page配置文件。
位于根目录下的是全局文件；位于page目录下，是每个页面的配置文件。页面配置文件之间互不影响。
全局的配置文件在于，为你的整个项目制定统一的风格，良好的用户体验。而每个页面的配置文件，在于有了整体的风格以后，为每个页面提供个性化的风格。

结构文件类型之间的关联

.wxss 和 .wxml

微信小程序中的.wxss,.wxml，和css3 html5,基本一样。w3schools上有很详细的教程。

.js 和 .wxml

Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: "SuperTrampAI",
    text: 'init data',
    array: [{ msg: '1' }, { msg: '2' }],
    initText:"init text"
  }
})

在data中定义的变量，可以在wxml中，以如下方式取到数据

{{message}}

同时，支持多种数据格式
在js中可以定义函数

changeText: function(){
    this.setData({
      initText:"changeText"
    })
  }

在wxml中使用：

{{initText}}

函数的另外一种使用方式
1.新建一个js文件

function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

在需要用到的地方引入

//.js
var common = require('common.js')
Page({

  /**
   * 页面的初始数据
   */
 helloMINA: function () {
    common.sayHello('MINA')
  },
  goodbyeMINA: function () {
    common.sayGoodbye('MINA')
  }
})

在wxml中使用：

helloName

.json

作为静态配置文件存在。
在全局的json文件中，可以配置整个项目的样式，超时时间，加载的插件等等。

改变全局json文件中，pages项，第一个页面会优先现实

"pages": [
    "pages/main/main",
    "pages/index/index",
    "pages/logs/logs"
    
  ]

sitemapLocation 配置sitemap文件的路径，sitemap.json可以配置是否可以检索

在今天学习即将结束时，脑袋冒出来一问题：现在这个时间点，学习微信小程序，会不会已经晚了？时间点已经过去了？如果，现在学了如何做小程序，是为了给别人去开发小程序，当然红利期已经过去了，该有小程序的公司已经有了，没有小程序的也已经有了。而如果你学习小程序是为了实现自己的想法，是再做增量，基于这一出发点，你的所学不会像flash一样，路径已经淘汰。

免责说明：更详细系统全面的文档说明，请参见官方文档，该文只是为了书面的呈现作者是怎么想的。