1、入门第一个小程序

学习视频：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
进入下载界面下载开发版

image.png

查询开发者id

image.png

我的开发者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;
}

运行效果：

image.png

用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);
},

测试

控制台输出用户信息

image.png

动态更新用户昵称和头像

前端页面动态绑定后台数据{{变量名}}

<view class="container">

<image src="{{src}}"></image>

<text>{{name}}</text>

<button open-type="getUserInfo" bindgetuserinfo="myUserInfo">点击获取头像和昵称</button>
</view>

image.png

数据来源于.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
})
},

image.png

编辑标题栏.json

app.json全局更改
index.json只更改当前页

在app.json里输入window:自动补全以下内容：

  "window": {
    "navigationBarBackgroundColor": "#639",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "第一个小程序",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },

可以编辑里面的属性看效果

运行效果

image.png

第一个小程序完成了

1、入门第一个小程序