HBuilder uni-app 小程序开发

这几天研究了哈小程序开发，使用过的是HBuilder和微信开发工具：

.下载HBiulder和微信小程序开发工具(稳定版)。

• https://www.dcloud.io/hbuilderx.html                            HBiulder
• https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html             微信小程序开发工具下载完

下载完后它有一个引导页，教你了解怎么使用，看完后点击文件新建项目，创建一个原有的的hello模板来熟悉它：

 

创建好后，我们来介绍哈目录结构：

components：组件目录，放复用组键

pages:业务页面文件存放目录

static：静态资源存放(图片、视屏、音频等)，静态资源只能放在这

APP.vue:应用配置，用来配置APP全局样式以及监听应用生命周期

main.js:Vue初始化入口文件

mainfest.json:配合应用名称、appid、logo、版本等打包信息

pages.json：配置页面路由 、导航条、选项卡等页面信息

 

项目最开始由main.js作为入口进入注册的组件，然后去读取pages.json文件，这个文件里面的Pages：里面就是放置的你将要显示的一些功能页面（当作是一本书的目录,根据目录的页数路径去找到对应的功能页面），注意：Pages里面第一个页面就是默认的首页。

 

想要使用全局的CSS样式，则需要在APP.vue里面去导入组件（@import "自定义全局样式路径"），这样才能在后面的功能页面中class="样式"了。若某个页面需要单独的使用某些东西，就需要单独导入自定义组件，并使用组件:components: {自定义的组件名},

 

然后就是几个基本的初始方法：

onlaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）（app.js）；

onLoad: 页面加载：小程序注册完成后，加载页面，触发onLoad方法。一个页面只会调用一次，

onShow: 页面显示

onReady: 首次显示页面，页面初次渲染完成，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次，

onHide: 页面隐藏：当navigateTo或底部tab切换时调用。

onUnload: 页面卸载

 

要注意的就是这些，中间使用的是Vue.js的方法，当然也可以使用js，但是建议使用vue.js。

然后是页面基本的结构分为三部：

第一部由<template></template>标签组成的显示界面，用于显示的，

    建议使用uni-app给出的显示格式，这样不至于打包多种形态的时候去转换，也会有很多方法，基本的绑定变量:test  ,绑定事件@click:"change" ，和循环v-for="(item,index) in list" :key="index" 要会，这个在官方的文档里面都有：

https://uniapp.dcloud.io/component/README

 

第二部是由<script></script>标签组成的方法执行。业务逻辑。

//引入自定义组件    
import 组件名from '组件的路径'  (最好是绝对路径)
    //引入模块
	export default {
    //若上面引入了自定义组件，则需要引入使用才能生效
		components: {
			组件名,
		},
        //参数值，
		data() {
            //必须接入return才能返回使用在上面的显示中
			return {
                //定义的一个数据，用于接受后端发送过来的值，等会儿便利在上面显示
				List:[],
			}
		},
        //定义方法的地方，所有的需要执行的方法，如点击时间等都是在这里面定义，它才会对应
		methods: {
			
            /* 页面跳转过来就执行的加载页面 */
			onLoad(){
                //uni-app原生的加载中动画
				uni.showLoading({
					title: '加载中',
					mask: false
				});   
                //执行自定义的数据填充方法
				this.load();
                //关闭页面刷新
				uni.startPullDownRefresh();
			},
			/* 页面刷新 */
			onPullDownRefresh() {
				console.log('刷新页面');
				/* 1秒后关闭刷新 */
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
             //自定义的数据加载的方法
			load() {
                  //uni-app定义的发送请求的方法
				uni.request({
                   //自己后台的访问接口，若需要带参访问，直接后面拼接就是，或者下面的data中声明
					url:"localhost:8008/testManager/interface/test",
                    //响应格式
					dataType:'json',
                    //参数，这里面的参数会跟着url发送出去
					data:{},
                    //请求成功返回
					success:(res)=>{
						console.log('success', res);
                        //返回200状态码表示成功
						if (res.statusCode == 200) {
                            //隐藏加载中动画
							uni.hideLoading();
							if (res.data.List.length>0) { //有数据
								for (var i = 0; i < res.data.List.length; i++) {
									var test= {};
						         test["DEMO01"] =res.data.List[i].DEMO01;
									test["DEMO02"] = res.data.List[i].DEMO02;
									this.List.push(test);
								}
							} else {
								console.log("没有数据!")
							}
						}
					},
                    //失败放回函数
					fail(res) {
						console.log("查询问题返回失败...!")
					}
				})
			},
			
		}
	}

 

第三部就是由<style></style>标签组成的设置样式的。这个去看CSS就行了。

 

 

希望能帮到大家