微信小程序开发必备hellow word

---

打开web开发者工具，新建一个纯净的项目（上一篇有建立项目），不要勾选quick start 这样就是一个什么都没得的项目！

---

按照目录结构建立文件

---

welcome.wxml文件

<!--wxml编写基本的页面类似html--> <view class="container"> <image style="width:200rpx;height:200rpx;" class="avatar" src="/images/3.png"></image> <text class="motto">Hello, 不要脸</text> <!--<view class=".journey-container">--> <text class="journey">开启小程序之旅</text> <!--</view> --> </view>

---

app.json文件中定义项目入口文件

{ "pages": [ "pages/welcome/welcome" //入口指向文件 ], "window": { //修改顶部导航的默认颜色， "navigationBarBackgroundColor": "#405f80" } }

---

{}welcome.wxcss 样式文件，（也可以写在html内联样式）

注释：rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应，类似于rem，

/*垂直居中*/ .container{ display: flex; flex-direction:column; align-items: center; /*background-color:#b3d4db;*/ } /*头像*/ .avatar{ width:200rpx; height: 200rpx; margin-top:160rpx; } /*字体*/ .motto{ margin-top:100rpx; font-size:32rpx; font-weight: bold; } .journey{ font-size:22rpx; font-weight: bold; line-height:70rpx; color: #405f80; margin-top:130px; border: 1px solid #405f80; width: 200rpx; height: 80rpx; border-radius: 5px; text-align:center; } /*背景色*/ page{ height: 100%; /*background-color:#405f80;*/ }

---

{}app.wxss文件是公共的样式，可以将一些复用的样式提取到这个文件中，如需重新定义，只需要在welcome.wxss重新定义下样式，（如果同一个样式属性分别在{}app.wxss和welcome.wxss同时是以welcome的文件为准，就近） 如：字体公用，雅黑 text{ font-family: MicroSoft Yahei; font-size: 24rpx; color: #666; }

---

运行js需要在page方法里面，所以要在welcome.js中加上 Page({ })

---

不然会报错：

---

Hellow, 不要脸————->完成结束！

我们总是这样走，遇见了很多，也错过了很多