本人资深后端码农一枚,近期项目需求,接触到了微信小程序,将学习过程整理成文分享给小伙伴们,因为是边学边整理不免有表述不对的地方,望你们及时指正,感谢。html
微信群二维码 欢迎交流git
点击 https://mp.weixin.qq.com/wxop...,进入小程序注册页面并根据指引填写相关数据。github
开发者工具下载地址,根据本身的操做系统下载对应的版本json
登陆 https://mp.weixin.qq.com,设置
-开发设置
中找到AppID:小程序
运行已安装的微信开发者工具
,选择小程序项目
,填写上一步的AppID及目录等信息。后端
在项目目录下分别建立如下文件:微信小程序
/app.json微信
{ "pages": [ "pages/index/index" ] }
/pages/index/index.js微信开发
Page({ data: { hello: "这里将显示Hello文字" }, handleDisplayHello() { this.setData({ hello: "Hello WeChat MiniProgram" }) } })
/pages/index/index.wxmlapp
<view class="container"> <view class="content">{{hello}}</view> <button bindtap="handleDisplayHello">显示Hello</button> </view>
/pages/index/index.wxss
.container { display:flex; flex-direction: column; align-items: center; } .container .content{ margin: 50rpx; color: #0000cc; }
点击工具栏中的编译
按钮,在模拟器中能够预览到效果,点击小程序中显示Hello
按钮后便可预览Hello WeChat MiniProgram
,如图:
以上即是小程序开发的简单准备工做及HelloWorld的Demo实现,下一篇文章将对每一个文件进行详细讲解。
将对微信小程序源文件结构及含义进行详细讲解,敬请期待。
微信群二维码会定时失效,为了方便更新,将入群二维码放到了Github上 传送门>>>