1.小程序index页静态搭建

新建目录如下：C:\Users\vende\guos\wechat_code

在目录中新建一个 wechat_study 文件夹

打开微信开发者工具中找到项目然后点击-->新建--->找到 wechat_study目录接着打开一个新项目，开始着手学习新技能；

目录结构是上面这样的，自己增加了：app.js  app.json   app.wxss 文件，因为除了 project.config.json 和 sitemap.json 其他的都得自己创建；

app.js文件代码为：

// 注册小程序应用
App({
 
 
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
},
 
 
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
},
 
 
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
},
 
 
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})

app.json文件代码为：

{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "navigationBarBackgroundColor": "#bfa",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "好消息"
    }
}

app.wxss文件中的代码为：

/* 全局公共样式 为了使首页背景颜色满屏 */
page {
    height: 100%;
}

创建了pages目录，和pages下的index目录，在index下建样式结构时可以通过一键生成：右击-->新建Page 即可；

    在index目录下的index.wxml中的代码：

<view class="indexContainer">
    <image class="avatarUrl" src="/static/images/nvsheng.jpg"></image>
    <text class="userName">G『 s 』</text>
    <view class="goStudy">
        <text>hello world</text>
    </view>
</view>

    index.wxss文件中的代码：

/* pages/index/index.wxss */
 
.indexContainer {
    display: flex;  // 伸缩盒模型
    flex-direction: column;  // 竖着排列
    align-items: center;  // 居中
    background: #bfa;  // 背景颜色
    height: 100%;
}
 
.avatarUrl {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;  // 边框圆角-> 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;  // 外边距圆角
}

接着建 static 目录，用来存放 静态文件：image...