听说了吗？咱们常用的微信小程序就和你手机里那些随时可用的游戏一样方便。可以快速找到想要的信息和享受各种服务。别想太多了，快来跟我学怎么用微信开发者工具自己做小程序，还会有详细的架构和配置介绍哦～

登录与设置

首先，用你的号登陆微信开发者工具。登录之后在那儿找到个叫“设置”的玩意儿，接着找“开发者设置”。这儿就是你要搞定的小程序相关信息。然后瞅瞅，有个“用户身份-开发者”，把你要用的小程序微信号绑上就行了。

创建小程序项目

搞定了！现在可以用开发者工具做小程序和码代码！先点开“项目”，跟着提示填一下你收集到的信息，记得给这个项目取个不跟小程序重复的名字，比如说叫“我的第一个项目”好了；弄完这些之后选个地儿放代码，再点击“新建项目”就大功告成。

生成初始项目

看不懂小程序代码不怕，新手可以先试试案例。不懂就按下"是"钮，系统会给你指令解释，告诉你怎么做，每步都很明确！

开发者工具界面介绍

//app.jsApp({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this; if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo; typeof cb == "function" && cb(that.globalData.userInfo) } }) } }); } }, globalData:{ userInfo:null } })

搞定了！现在就可以去项目文件夹里玩儿，这儿什么都有。左面菜单栏有个「编辑」，点进去就能看代码改代码；「调试」这个功能能帮你监控软件在微信环境下跑得怎么样，还能用手机看实时效果呢；记得用「项目」把做好的内容发到手机上看实际效果哈。

代码文件功能介绍

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

咱的项目就在编写页搞定！就等小白代码来点亮。那整三个玩意儿到底啥意思呀？以后随心所欲改，自己动手就能搞出新功能。先说说app.json，这儿就是我们小程序的设定中心；然后是app.wxss，这可是我们小程序要用到的所有样式。

小程序页面配置

你想要找到小程序每个页面在哪里？很简单，只需打开app.json文件的pages部分就行了。第一个出现的就是小程序的主页。创建新页面时，记得使用三种符号来表示，然后填入相应的数据和程序就可以了。至于JavaScript，这家伙就是专门处理页面各种事情的大咖，比如，它能拿到小程序的实例，了解数据怎么用，甚至还是处理页面上互动活动的行家里手！

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

样式表和配置文件

想在网页上添点新功能？直接改下app.wcss文件搞定！但别忘了检查下app.json里有没有window冲突，要是原生页面啥都没配置，那就用JSON里的默认值填补~

总结与展望

<view class="container"> <view  bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover">image> <text class="userinfo-nickname">{{userInfo.nickName}}text> view> <view class="usermotto"> <text class="user-motto">{{motto}}text> view>view>

看完这篇文，你能瞬间搞定微信小程序吗？首先注册个账号，然后就是创建项目，记住编码和配置这些步骤喔。其实这款工具能让你快速脱离小白阶段，赶紧试试看，开始你的小程序编写之路！

你们编程也会遇到不顺心时候？有没啥对付方法？来评论区随便侃侃呗~别忘了给我点个赞，再分享下这篇文，让大家都体验到微信小程序开发的乐子儿！

//index.js//获取应用实例var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } })