uniapp开发微信小程序-2.页面制作

一、项目配置

1.基础配置获取uniapp标识。

通过HBuilder账号登陆即可点击按钮随机获取，强制要求。

2.微信小程序配置AppID。

二、编辑页面

技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-1.工具和本地环境 —— 技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境 —— 技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-1.工具和本地环境

与以往记录过程不同，之前都是直接完成一个页面的前后端所有操作，这次先完成所有前端静态页面的搭建，后期引入后端接口。

1.新建页面

如果大家对sass框架（css框架）感兴趣，可以看我往期文章： 技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-13-1.使用sass工具搭建前台web端页面 —— 此文章中包含了sass的安装等内容，在HBuilderX新建的uniapp项目中，已经自动安装了sass工具，直接看下sass使用方法即可。 sass只是一个工具，可有可无。

创建完页面后，活动页面已经创建完成。同时page.json中也自动生成了该页面的路径，比较方便： 以同样的方法创建“商城”和“我的”页面，为大多数小程序的底部导航tabbar做准备。

2.设置底部导航tabbar

在static文件夹新建一个文件夹，准备放tabbar的图标，我起名为tabbar-icon： 右键这个文件夹-在外部资源管理器中打开，去阿里图标找一些对应四个页面的图标： 在page.json中设置tabbar：

"tabBar": {
          
   
	"color": "#7A7E83", // 字体选中前颜色
	"selectedColor": "#e7a924", // 字体选中颜色
	"borderStyle": "black", // 导航栏边框颜色
	"backgroundColor": "#ffffff", // 导航栏背景颜色
	"list": [{
          
   
		"pagePath": "pages/index/index", // 页面路径
		"iconPath": "static/tabbar-icon/index.png", // 选中前icon
		"selectedIconPath": "static/tabbar-icon/index_select.png", // 选中后icon
		"text": "首页"
	}, {
          
   
		"pagePath": "pages/activity/activity",
		"iconPath": "static/tabbar-icon/activity.png",
		"selectedIconPath": "static/tabbar-icon/activity_select.png",
		"text": "活动"
	}, {
          
   
		"pagePath": "pages/store/store",
		"iconPath": "static/tabbar-icon/store.png",
		"selectedIconPath": "static/tabbar-icon/store_select.png",
		"text": "商城"
	}, {
          
   
		"pagePath": "pages/user/user",
		"iconPath": "static/tabbar-icon/user.png",
		"selectedIconPath": "static/tabbar-icon/user_select.png",
		"text": "我的"
	}]
}

此时可观察页面变化，点击导航按钮测试。如果页面没有动，检查下icon路径和页面路径等设置是否正确： 此时就可以在各个页面自由发挥了。

3.全局样式设置

一张图就能大概理解的内容，就不多bb了： 另外，关于其他样式也可以到uniapp官网进行查询，全局样式设置链接：

4.界面设置

以下拉刷新为例，我们在首页加入下拉刷新功能。

"enablePullDownRefresh": true

此时在首页下拉页面就可以看到刷新样式，同时这里的背景颜色就是上面全局样式中的backgroundColor样式的颜色： 接下来在首页设置下拉操作后运行的js方法：

onPullDownRefresh() {
          
   
	console.log(刷新页面);
	setTimeout(function () {
          
   
		uni.stopPullDownRefresh();
	}, 1000);
},
// 解释：onPullDownRefresh()在进行下拉操作时执行其中方法：
// 1.日志中显示“刷新页面”四个字（可以替换成我们想要进行的操作）
// 2.等待1秒后进行关闭下拉样式的方法stopPullDownRefresh()

放在首页index.vue中js部分： 测试，没问题： 最后，如何在不下拉的情况下设置下拉刷新？

uni.startPullDownRefresh()

比如某些数据在更新后页面需要刷新才可以显示，但在用户体验上，这种情况不该让用户自行刷新，所以我们要自动刷新这个页面。 这是我们只需要封装一个方法，调用上边这个uni封装好的接口，进行下拉刷新。 以上这个过程，就是点击Uniapp这个图片，此时触发刷新方法，然后进行操作的过程，与用户下拉刷新的操作结果相同。 测试，没问题： 到此，以上就是小程序页面制作的基础方法。我先继续往下做，定期更新我遇到的工具和效果等问题。

————