小程序学习-uniapp

一、简介

uni-app 是一个使用 Vue.js (opens new window) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台；

二、开发工具

uni-app 推荐使用 Hbuilderx 开发工具来开发项目（下载地址：HBuilderX-高效极客技巧，下载 App开发版）；结合微信开发者工具进行调试

三、创建项目

（1）打开Hbuilderx 点击 文件- 新建- 项目

（2）uni-app -> 填写项目名称、选择项目存放路径 -> 模板 uni-ui 项目->创建，然后就可以生成一个小程序项目；

（3）项目结构

pages: 存放所有页面
static文件：存放静态资源文件，css、js、jpg
App.vue：应用配置，配置小程序全局样式、生命周期，提取每个页面公共css，可以在其他vue中使用（可以被局部style覆盖）
main.js：Vue 初始化入口文件，可以统一配置全局的对象、数组、函数（如url与用户信息）
manifest.json：项目配置与发布
- 项目默认分配一个uni-app；
- App图标、启动图配置是发布用的；
- App模块权限是第三方的权限（支付、定位、摄象头等）
- h5配置（https设置、端口设置）
- 微信小程序配置（官方的App ID、本地测试环境建议取消勾选“检查安全域名和TLS版本”）
pages.json：配置页面路径、页面样式、tabBar等信息
uni.scss：全局样式

四、把项目运行到微信开发者工具

（1）配置 appid：在 manifest.json 文件 -> 微信小程序配置-> 填写微信小程序 appID；

（2）在 Hbuilderx 配置微信开发者工具的安装路径（这样可以在 Hbuilderx 里面运行的时候自动打开微信开发者工具查看项目）：工具 -> 设置 -> 运行配置 -> 小程序运行配置，配置微信开发者工具的安装路径，如：C:\Program Files (x86)\Tencent\微信web开发者工具

（3）在微信开发者工具开启服务端口：微信开发者工具点击设置 -> 安全设置 -> 安全，开启服务端口

（4）运行：Hbuilderx 点击 运行 ->运行到小程序模拟器 点击第一个就可以在 Hbuilderx 自动编译，成功之后会自动打开微信开发者工具；

注意：这个时候我们想修改项目里面的内容，需要在 Hbuilderx 里面修改

五、开始项目开发

（1）tabar底部导航栏设置，在page.json文件中设置，和pages同级

// 底部导航栏设置

"tabBar":{
       "selectedColor":"#1296db", // 文字选中后颜色
       "color": "#333333", // 文字本身颜色
       // 使用图标库
       // "iconfontSrc": "static/fonts/iconfont.ttf",
       "list":[
           {
               "pagePath":"pages/home/home",
               "text":"首页",
               "iconPath":"static/tabar/home.png", // 图标图片路径
               "selectedIconPath":"static/tabar/home-active.png" // 选中后图标图片路径
               // "iconfont":{
               //    "text": "\ue74e",
               //    "selectedText": "\ue74e"
               // }
           },
           {
               "pagePath":"pages/cate/cate",
               "text":"分类",
               "iconPath":"static/tabar/cate.png",
               "selectedIconPath":"static/tabar/cate-active.png"
           },
           {
               "pagePath":"pages/cart/cart",
               "text":"购物车",
               "iconPath":"static/tabar/cart.png",
               "selectedIconPath":"static/tabar/cart-active.png"
           },
           {
               "pagePath":"pages/my/my",
               "text":"我的",
               "iconPath":"static/tabar/my.png",
               "selectedIconPath":"static/tabar/my-active.png"
           }
       ]
   },

（2）配置网络请求

在根目录下新建utils文件夹-> 该文件夹下创建request.js文件，进行封装数据请求函数

// #ifdef H5
var baseURL = "/api"
// #endif
// #ifndef H5
var baseURL = "https://ku.qingnian8.com/dataApi"
// #endif
var request = function(options){
   return new Promise((resolve,reject)=>{
       uni.request({
           url:baseURL+options.url,
           method:options.method||'GET',
           data:options.data||{},
           dataType:options.dataType||'json',
           success: (res) => {
               resolve(res.data)
           },
           fail: (err) => {
               reject(err)
           }
       })
   })
}
export default request

在根目录下新建api文件夹->该文件夹创建index.js文件

// 引入request请求方法
import request from '../utils/request.js';

// 请求首页基础数据的方法
export function getHome(params){
   return request({
       url:'/news/navlist.php',

        methods:'GET',

params: params
   })
}
// 获取首页指定分类下的分页数据
export function getChoose(data){
   return request({
       url:'/news/detail.php',
       method:'POST',
       data:data
   })
}

在需要使用的页面引入和调用

<script>

import { getHome } from '../../api/index.js'

           onLoad(){
               this.getHome()
           },
           methods:{
               // 获取首页
               getHome(){
                   getHome().then(res=>{
                       console.log('res',res)
                   })
               },

}

</script>

（3）公共组件封装和使用

在根目录下创建components文件->在该文件下创建组件（并创建同名目录）
在需要使用的页面中引入，注册，使用

<template>

<view>

<div>

        <-- 使用 -->
           <Texthome></Texthome>
       </div>
   </view>
</template>

<script>

// 引入
   import TextHome from '../../components/Texthome/Texthome.vue'
   export default {
       components:{TextHome}, // 注册

        }

</script>

（4）本地缓存

uni.setStorageSync('homeLists',JSON.stringify(data)) // 缓存到本地
let a = JSON.parse(uni.getStorageSync('homeLists') ) // 获取本地数据

六、小程序分包

App默认为整包。因小程序有体积和资源加载限制，分包的目的是优化小程序的下载和启动速度

（1）创建分包目录：在根目录下创建分包目录，subpackage；

（2）在pages.json文件中配置分包结构

"subPackages": [{

                "root":"subpackage",

                "pages":[ ]

                }]

（3）创建分包页面

在 sunpackage 目录上右键点击->新建页面->填写页面名称->勾选在pages.json中注册->选择分包 sunpackage -> 然后创建就可以了，编译器会自动在代码中将配置信息填充到 sunpackage 分包下面；

// 分包
   "subPackages":[
       {
           "root":"subpackage",
           "pages":[
{
"path" : "goods-detail/goods-detail",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}

}
]
       }
   ],