搭建第一个自己的微信小程序

为了帮助开发者简单和高效地开发和调试微信小程序，我们在原有的公众号网页调试工具的基础上，推出了全新的 微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式

一、微信开发工具下载：微信开发工具，安装过程就不介绍了，跟普通的安装工具一样，一直下一步就好了。

二、开始搭建我们自己的第一个微信小程序

1、上篇文章我们介绍了微信小程序的注册过程，也告诉你怎么查看appid，下面我我们开始搭建我们自己的小程序，打开微信开发者工具，选择小程序项目

2、填写上篇文章中介绍的appid，如果你还没有appid也可以使用测试appid，并勾选建立普通快速模板选项，该选项可以帮我们快速搭建一个微信小程序的框架出来，类似一个脚手架

3、进入将出现如下图所示的界面，微信开发工具已经帮我们搭建了一个简单的项目了,到此你的第一个项目就搭建成功了

4、下面我们来看看项目的目录结构和文件

1)pages主要存放文件信息
它包含4个文件：js（必须），wxml（必须），json（非必须），wxss（非必须）

2)app.js是公共的js文件，主要处理一些全局的小程序逻辑

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

3)app.json该文件中存放的公共配置，格式就是json，其中pages是必须要配置的，程序中的每一个页面，都需要在这里配置，否则页面会找不到,window属性配置的是一些窗口属性

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

4)app.wxss是小程序的公共样式表，结构如下，首先是一个小数点.加上别名，之后就是一对大括号，在大括号内设置属性，键值对用冒号分割，键值对后面有分号

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

5)project.config.json 是整个项目的一些项目和环境配置文件

{
	"description": "项目配置文件",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.2.5",
	"appid": "wx3639f434d0dce6cc",
	"projectname": "helloworld",
	"debugOptions": {
		"hidedInDevtools": []
	},
	"isGameTourist": false,
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

以上只是简单介绍了一些每个文件的作用，后续文章将详细介绍每个文件的具体用处和常用参数的使用。

  本文由明天的地平线创作，如想了解更多更详细的内容，请关注一下公众号，公众号内将进行最新最实时的更新！