大数据综合课程设计（二）

在微信开发者工具中，创建一个新的小程序，路径C:\Users\32356\Desktop\code\wechat_study，在创建文件的目录下，删去除project.config.json和tsconfig.json文件外所有文件，在调试器中新建pages文件夹下创建index文件夹直接回车自动生成四个文件，选择app.json进行编译。

原来

{

  "pages": [

    "pages/index/index"

  ]

}

编译为

{

  "pages": [

    "pages/index/index"

  ],

  "window": {

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#f0f",

    "navigationBarTitleText": "随川",

    "navigationBarTextStyle": "white"

  },

  "style": "v2",

  "sitemapLocation": "sitemap.json"

}

之后进入创建的index文件夹中的index.wxml 同时在小程序路径的新建文件夹static下放入照片

编译输入

<view class="indexContainer">

  <image class="avatarUrl" src="/stuck/images/f.png"></image>

  <text class="userName">刘佳琳</text>

  <view class="goStudy">

   <text>hello world</text>

  </view>

</view>

之后在index.wxss中编译

各元素格式，大小，颜色，居中，边框... 大小用rpx相对大小，不使用px。

编译内容为

/* pages/index/index.wxss */

page{

  height: 100%;

}

.indexContainer{

  display: flex;

  flex-direction: column;

  align-items: center;

  background: #f0f;

  height: 100%;

}

.avatarUrl{

  width: 100px;

  height: 100px;

  border-radius: 50%;

  margin: 100rpx 0;

}

.userName{

  font-size: 32rpx;

  margin: 100rpx 0;

    

}

.goStudy{

  width: 300rpx;

  height: 80rpx;

  line-height:80rpx ;

  text-align: center;

  font-size: 28rpx;

  border: 1rpx solid #333;

  border-radius: 10rpx;

}

最后Ctrl+s运行小程序

实现index页静态搭建

结果如下