微信小程序新手向——界面布局

在微信开发者平台申请到AppId之后，采用不用云开发和不用模板创建项目

进入项目之后，在文件序列中找到index.json这个文件，其中navigationBarTitleText这个参数即为整个小程序的名称

我们将后面的文字改为“调查问卷”，那么相对应的标题也会发生改变

将标题做好之后，就开始做我们的一个主界面。
由于微信小程序本质上来说是个HTML5程序，所以我们需要将界面做一个布局。

切换到index.wxml文件，先写一个view将整个界面包裹起来
在这里有个编译器的小技巧，可以直接输入view.container后按回车健，就自动生成了这段代码，同理view.xxxx的名称是可以替换的

然后我们切换到index.wxss文件，然后输入container的属性

margin代表的是外边距属性，与html中的css文件相同

做完整个框架之后，我们需要做一个标题，我们再创建一个view，命名为Page_Name，依旧来到编辑布局
font-size属性是字体大小
line-height是行距
text-align是文字的布局

回到wxml界面，在view里面写上

<view class="Page_Name">调查问卷</view>

然后点击编译后，就能看见屏幕上出现你的第一个数据啦！

这里又有一个提升开发效率的小技巧：右键顶部的文件，出现拆分编辑器，选择向右拆分，再把wxml拖到右侧，这样就能同时看见预览效果，参数页面，布局页面

细心的小伙伴或许已经发现了我发的图里，标题那不是按照刚才那么写的，而是使用了{{ name }}代替，这是使用了js里的功能，这样开发便于远程更新，而不用多一个选项，就要新建一个View，这样全机更新会严重影响用户的体验。

那么这种方法又该怎么操作呢

我们来到index.js文件，先声明出一个变量
然后在到page data里面，注册这个tmpQ的存在

这样，就可以在wxml里面直接调用js页面的name参数

我们做一款调查问卷，必然少不了让用户输入和选择，同理采用上面的布局方式，写出问题。

然后我们就需要写入一个input的输入框
由于输入数据也需要做个样式，再次来到index.wxss文件

在参数里调整输入字体的大小，颜色等

做完了输入框，还有选择框，依旧查询官方文档得知，是由一个radio包一个label实现的
在value属性中是选项的id，后面是展示给用户的信息，在静态布局中，有几个选项，就写几个radio，但在js控制下就不需要。

在js控制下，写上wx.for的循环函数读取js的参数，类似于数组的循环读取

回到输入框位置，这也是能做一个js调用，用wx.if判断类型后执行代码
下面是js的数据代码
在做这些之前，需要一个Block来框住这些控件，并一样使用wx.for循环读取数据

里面的参数，是我们在js里面声明的版块

我们将所以控件做好之后，需要进入下一步或者是提交，就需要写一个Button

其中bindtap是传参的功能，type还有很多的样式可以选择，可以去官方文档查阅

当我们全部操作下来，一个简单的界面就制作完成啦！！