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

Bertha 。 2022-05-10 10:40 199阅读 0赞

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

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

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

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

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

![70 1][]

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

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": []
    		}
    	}
    }

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

本文由[明天的地平线][Link 2]创作，如想了解更多更详细的内容，请关注一下公众号，公众号内将进行最新最实时的更新！  
![二维码][70 3]

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[70]: /images/20220510/e1c2f4062a0241149790be66a9db087e.png
[70 1]: /images/20220510/451ed54206204b18a44300ad263a5951.png
[70 2]: /images/20220510/3466897ff1c443178fecaddea3f2b60c.png
[Link 2]: https://somta.com.cn
[70 3]: /images/20220510/d3d0c76fbf8f48ce9be8935d576a5113.png