使用uni-app开发微信小程序-基础知识

概念

使用uni-app开发微信小程序，uni-app是使用vue开发的框架，能通过框架编译到微信开发者工具的代码

新建项目

下载app开发版的HBuilder（含插件多点） - 新建uni-app项目 - 选择默认模版

运行小程序

运行小程序 - 点击运行 - 点击运行到微信小程序 - 会进行编译并且打开一个开发者工具

基本知识

在pages目录下创建页面，创建完页面需要在page.json上添加页面的路径path

pages.json使用（配置页面路径，顶部导航栏，底部导航栏-图标配置）

{
  "pages": [
    {
      "path": 'pages/index/index', //页面路径
      "style": {
        navigationBarTitleText: '页面导航栏标题'
      }
    }
  ],
  "globalStyle": {
     "navigationBarTextStyle" : 'black',       //导航栏文字颜色
     "navigationBarTitleText": '全局导航栏标题'  //导航栏标题
     "navigationBarBackgroundColor":'#FFF',    //导航栏背景颜色
     "backgroundColor":'#F8F8F8'               //窗口的背景色跟上面保持一致即可
  },
  "tabBar": {
    "color": '#999794',                       //底部导航栏文字颜色
    "selected": '#33312e',					  //底部导航栏选中文字颜色
    "borderStyle": 'white',					  //底部导航栏边框颜色
    "backgroundColor": '#fafafa',			  //底部导航栏背景颜色
    "list": [
      {
        "pagePath": "page/index/index",		  //首页页面路径
        "iconPath": "static/tab/hone.png",	  //首页未选中图标
        "selectedIconPath": "static/tab/hone_selected.png", //首页选中图标
        "text": '首页'						  //首页图标文字
      }
    ]
  }
}

写页面的技巧：组件拆分

在index目录下新建一个index.vue和一个components目录放首页所有组件

然后在index.vue下引入所有的组件（引入后需要组册下才能显示 - vue的知识）

<template>
	<view>
		<Search></Search>                            //组件显示
        <Title></Title>
        <Takeout></Takeout>
	</view>
</template>

<script>
	import Search from './components/search.vue' //引入组件
    import Title from './components/title.vue'
    import Takeout from './components/takeout.vue'
    export default {
        component:{ 
          Search,                                //注册组件
          Title,
          Takeout
        } 							
    }
</script>