学习视频：https://www.bilibili.com/video/av58012612/?p=4
wxb653018dc7ccf109
https://mp.weixin.qq.com/
https://blog.csdn.net/valada/article/details/80892569
https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5#
学习资料和工具下载
进入https://mp.weixin.qq.com/选择小程序-查看详情即进入到如下页面，里面提供开发工具下载和API说明文档的下载
https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
其中工具下载地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
账号注册
https://mp.weixin.qq.com/右上角有“立即注册”按钮-选择左下角的“小程序”按钮，后按向导完成注册即可(wang.qj@neusoft.com/wqj9910192)
注册成功后会自动进入管理后台，一定记住自己的账号密码，方便以后登录
小程序管理平台
账号申请成功之后，就可以登录“微信公众平台 | 小程序”了。在目前这个时间点虽然并不需要马上做什么。本文接下来将对其中重要的菜单功能做简单介绍。
点击左侧菜单栏中的"设置"-进入设置界面
开发工具下载
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
进入下载界面下载开发版
查询开发者id
我的开发者id: wxb653018dc7ccf109
默认目录：
C:\Users\Administrator\WeChatProjects\miniprogram-1
程序构成
1、全局的三个文件，名称不可更改
app.js
app.json {}
app.wxss
2、新建页面目录比如pages用来放页面-->
然后在其下新建index目录-->
后在其下新建新建page-->输入名字，比如index，会自动创建
index.js:js文件，页面的逻辑实现
index.json:json负责标题栏和状态栏
index.wxml:页面骨架，类似html
index.wss:类似css，页面美化和部局
同时app.json会自动扩充
index.wxml中注释写法 可以用快捷键ctrl+/
第一个程序 hello world
1、wxml文件:
<!--pages/index/index.wxml-->
<view>
<!-- 图片-->
<image src="../../images/02.jpg"></image>
<!-- 文字-->
<text>hello world</text>
<!-- 按钮-->
<button>点击获取头像和昵称</button>
</view>
这时候布局比较乱，接下来开始改样式
2、样式文件和部局文件wss
注释写法/* pages/index/index.wxss */ 也可以用快捷键ctrl+
index.wxml第一行加上class属性 指定其样式表名称
<view class="container">
/* pages/index/index.wxss */
.container{
height: 100vh;
display: flex;
flex-direction: column;/*垂直布局 */
align-items: center;
justify-content: space-around;/*垂直方向分散布局*/
}
image{
width: 400rpx; /*宽度 */
border-radius:20%;/*圆角 */
}
text{
font-size: 50rpx;
color: red;
}
运行效果：
用js控制点击事件##
为button增加点击事件
<!-- 按钮
open-type="getUserInfo"表示激活获取用户信息的功能
bindgetuserinfo：获取用户信息后交由myUserInfo函数来处理
myUserInfo是自定义的，红色的部分是固定写法
-->
<button open-type="getUserInfo" bindgetuserinfo="myUserInfo">点击获取头像和昵称
</button>
index.js中增加事件定义
myUserInfo:function(e){
console.log(e.detail.userInfo);
},
测试
控制台输出用户信息
动态更新用户昵称和头像
-
前端页面动态绑定后台数据{{变量名}}
<view class="container">
<image src="{{src}}"></image>
<text>{{name}}</text><button open-type="getUserInfo" bindgetuserinfo="myUserInfo">点击获取头像和昵称</button>
</view>
-
数据来源于.js
data: {
name:'hello world',
src:'../../images/02.jpg'
},
myUserInfo:function(e){
console.log(e.detail.userInfo);
this.setData({
name: e.detail.userInfo.nickName,
src: e.detail.userInfo.avatarUrl
})
},
编辑标题栏.json
app.json全局更改
index.json只更改当前页
在app.json里输入window:自动补全以下内容：
"window": {
"navigationBarBackgroundColor": "#639",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "第一个小程序",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
可以编辑里面的属性看效果
运行效果
第一个小程序完成了
