微信小程序页面创建和index页静态搭建_微信小程序项目静态界面实现

第一步创建小程序

1.点开微信开发者工具，点击小程序，点击加号

2.在桌面创建名为code的文件夹，用来放置代码，在文件夹code中新建文件夹wechat_domo，作为熟悉小程序的根目录

3.索引目录，点击最右边的文件，点击桌面，找到code，选中wechat_domo，点击确定索引完目录，项目名称自动变为wechat_domo，因为我已使用过，所以为红色

4.输入网址mp.weixin.qq.com，使用微信扫描二维码，进入小程序主页，点击开发，点击开发设置，找到自己的AppID，输入自己的AppID

5.开发模式选择小程序，后端服务选择不使用云服务，模板选择js，点击确认，创建成功

第二部 页面的设置

1.打开微信开发者工具，左边为初始化工具，中间部分为代码

2.在本地打开文件项目code > wechat_study，删除多余文件，只留下project.config.json和sitemap.json，pages可能删不了，进入pages，先删除里面文件即可删去pages，此时中间部分只有两个文件了

3.点击新建文件，新建app.json 文件，放入页面路径；新建文件app.js，注册小程序应用，调用App（function）；新建文件app.wxss，用于放置全局公共样式文件

4.创建页面，将四个文件放在一个文件夹里，不要暴露在外面，便与后期维护

新建文件夹，命名为pages，在其下面建文件夹index，在index下面创建页面文件，右击index，点击新建page，输入index后回车即可，完成后创建了四个页面，且app.json中有了路径

5.设置窗口颜色

(1).点击app.json,设置窗口需要window，留下上面三行即可

(2).第一行更改导航背景颜色（只支持十六进制的表达方式）

 第二行更改字体颜色（只支持white和black）

第三行更改文字

6.搭页面

(1).点击index.wxml，清空，输入<view>

(2).输入图片，名字，hello word

(3).加入图片，在桌面创建文件夹static，创建images，存入照片，复制images文件夹，在code中的wechat_study中粘贴，回到开发工具，多了文件夹images，为了统一创建static，将images移进去，输入图片路径

(4).写样式，需要class取控制，如图添加

(5).打开index.wxss进行样式修改

indexContainer包裹器

background为背景颜色，设所有页面page高度为100%，将page放入全局公共样式

背景颜色填满整个屏幕

avatarUrl头像（px=2rpx）

userName名字

hello world：点击index.wxml，查看，返回去写goStudy

 调整页面背景颜色与窗口背景颜色一致即可