这几天研究了哈小程序开发，使用过的是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就行了。