wx小程序(一)

wx小程序(一)

结构上wx必有的全局app

然后pages上设置文件夹index，然后创建四件套

index.js—》老样子控制变化的

index.json配置文件，基本默认

index.wxml页面内容

index.wxss页面布局 类似css

创建一个如图的微信实列

index代码

<!--pages/index/index.wxml-->
<view class="container">
  <image src="{{picSrc}}"></image>
  <text>{{name}}</text>
  <button open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击我获取信息</button>
  <!--  open-type="getUserInfo"激活微信获取信息功能  bindgetuserinfo="getMyInfo"将数据传给自定义getMyinfo函数 -->
</view>

{{name}}是变量的命名方式 变量的值写在相应的js的data里面

wxss代码

/* pages/index/index.wxss */
.container{
  height: 100vh;
  display: flex;  /*flex布局方法*/
  flex-direction: column;
  align-items: center;
  justify-content: space-around;/*周围留空*/
}
image{
  width: 400rpx;
  border-radius: 50%;
}
text{
  font-size: 50rpx;
  color: red;
}

js的部分代码

data: {
    name:'hello word',
    picSrc:'/images/wx.jpg'
  },

getMyInfo:function(e){    //自定义函数
    console.log(e.detail.userInfo);
    let info=e.detail.userInfo;
    this.setData({
      name:info.nickName,
      picSrc:info.avatarUrl
    })
 },