大家好，我是你的好朋友思创斯。今天说一说微信小程序的页面布局_微信小程序开发页面布局,希望您对编程的造诣更进一步.
在微信开发者平台申请到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>
是否还在为ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！
【正版授权，激活自己账号】：
【官方授权 正版激活】：
然后点击编译后，就能看见屏幕上出现你的第一个数据啦！
这里又有一个提升开发效率的小技巧：右键顶部的文件，出现拆分编辑器，选择向右拆分，再把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还有很多的样式可以选择，可以去官方文档查阅
当我们全部操作下来，一个简单的界面就制作完成啦！！
文章由思创斯整理,转载请注明出处：https://ispacesoft.com/139620.html