移动端开发--H5、小程序、混合APP

共 8479字,需浏览 17分钟

 ·

2021-08-13 15:20

本文适合日常开发移动端项目或对移动端开发感兴趣的小伙伴阅读。

如果这篇文章有帮到你,欢迎关注前端早茶,与广东靓仔携手共同进阶~

作者:广东靓仔

一、前言

广东靓仔开发过H5、小程序、混合APP、Web等等的前端应用,这里给小伙伴们分享下移动端开发这方面的知识

1、使用过Vue、React、taro、uni技术开发过H5项目
2、采用过wepy、mpvue、taro、uni、原生小程序来开发小程序
3、运用过APICloud、uni、React Native开发过混合APP项目

    下面给小伙伴们分享下这些技术在移动端开发的运用,由于篇幅有限,只会大概讲讲方案~

    对某个技术感兴趣的小伙伴可以到官方文档进行深入学习,官方文档是最好的学习资源。

二、H5

1、Vue开发H5项目    

广东靓仔很久之前发过一篇使用Vue开发H5项目放在博客那里,今天看了下居然有7万多阅读量。下面给小伙伴们分享分享大概的思路。


viewport

通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
rem
方式1:安装插件 lib-flexible、px2rem-loader
方式2:自己封装个Rem
// 设计稿默认值
const DEFAULT_WIDTH: number = 375

const setRem = (window: Window, document: Document): void => {
  const docEl: HTMLElement = document.documentElement

  const resizeEvent: string = 'orientationchange' in window ? 'orientationchange' : 'resize'

  const reCaculate = (): void => {
    const clientWidth: number = docEl.clientWidth
    if (clientWidth) {
      docEl.style.fontSize = 20 * (clientWidth / DEFAULT_WIDTH) + 'px'
    }
  }

  if (document.addEventListener) {
    window.addEventListener(resizeEvent, reCaculate, false)
    document.addEventListener('DOMContentLoaded', reCaculate, false)
  }
}

export default setRem


请求
方式1: axios
方式2: fetch
当然我们需要结合业务进行二次封装,这里就不展开了。
Mock
推荐1:EasyMock
推荐2:RAP
UI库
推荐1:Vant UI
推荐2:Mint UI
Cube UI、Muse UI、WeUI、vux、aui、amaze...等等
根据业务选一款合适的来使用即可
工具推荐

lodash: JavaScript 实用工具库

自动获取yapi的数据类型:GitHub某些开源项目

自动上传代码:gulp

用户与命令行交互的工具:  Inquirer.js

如果我们采用自定义脚手架,可以试试Inquirer.js,效果如下:



2、React开发H5项目    

React 是一个用于构建用户界面的 JavaScript 库。

脚手架

create-react-app


请求

方式1: axios
方式2: fetch

superagent...等


UI库

推荐1. Ant Design Mobile
推荐2: Onsen UI
推荐3:Semantic-UI-React


taro、uni开发H5放到小程序再来展开讲,开发的代码区别不大

三、小程序

1、Taro

广东靓仔之前使用Taro开发过小程序、H5,也写过一些关于Taro的文章。


taro是京东推出的框架,可以使用一套代码输出到多端,下面是taro现在支持的平台:

  • H5

  • ReactNative

  • 微信小程序

  • 京东小程序

  • 百度小程序

  • 支付宝小程序

  • 字节跳动小程序

  • QQ 小程序

  • 钉钉小程序

  • 企业微信小程序

  • 支付宝 IOT 小程序

    Taro使用不难,在实际开发项目的时候会有一些棘手的问题,很多问题广东靓仔都遇到过,平时与小伙伴也有一些交流,有遇到技术问题的小伙伴可以一起交流交流解决方案。记得之前有小伙伴遇到上传图片压缩这方面的问题,经过一番尝试,最后解决了。

UI

推荐1: Taro-ui

尽量使用官方推荐的UI库,这样可以避免编译的时候出现一些不兼容的情况。


框架支持

React、Vue、Vue3、Nerv

如果是新的项目,这里推荐使用Taro3进行开发

2、Wepy

    广东靓仔之前也是用wepy开发过一个小程序,开发体验还可以。wepy.js借鉴了Vue的语法风格和功能特性,对官方提供的框架进行了封装,更贴近于MVVM架构模式。

简单讲解:一个.wpy文件可分为三大部分,各自对应于一个标签:

  1. 脚本部分,即<script></script>标签中的内容,又可分为两个部分:逻辑部分,除了config对象之外的部分,对应于原生的.js文件;

    配置部分,即config对象,对应于原生的.json文件。

  2.  结构部分,即<template></template>模板部分,对应于原生的.wxml文件。

  3. 样式部分,即<style></style>样式部分,对应于原生的.wxss文件。

    其中,小程序入口文件app.wpy不需要template,所以编译时会被忽略。.wpy文件中的scripttemplatestyle这三个标签都支持langsrc属性,lang决定了其代码编译过程,src决定是否外联代码,存在src属性且有效时,会忽略内联代码。 

小程序被分成三个实例:小程序实例App、页面实例Page、组件实例

import wepy from 'wepy';

// 声明一个App小程序实例
export default class MyAPP extends wepy.app {
}

// 声明一个Page页面实例
export default class IndexPage extends wepy.page {
}

// 声明一个Component组件实例
export default class MyComponent extends wepy.component {
}

3、uni

广东靓仔之前使用uni开发过小程序、H5、混合App,在很久前也是用过uni前身Mui,这里给小伙伴们分享下uni相关知识。

uni一套代码可以输出到10个平台:

  • Android版

  • ReactNative

  • iOS版

  • Web版

  • 微信小程序版

  • 支付宝小程序版

  • 百度小程序版

  • 字节跳动小程序版

  • QQ小程序版

  • 快应用

  • 360小程序

    在uni的开发过程中,跟我们在开发vue项目差不多。

需要注意的是:关于样式的的兼容、一些选择器对H5支持,但是不一定支持APP端。在开发小程序和APP过程中样式隔离需要我们手动开启,H5是自动开启的。

当然,uni开发过程会有一些坑,不过现在很多都是有开发者遇到过了,也有了解决方案。这里推荐vue开发者可以选择这个框架在日常项目中使用。

4、mpvue

    mpvue使用 Vue.js 开发小程序的前端框架,基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。


特点

  • 彻底的组件化开发能力:提高代码复用性

  • 完整的 Vue.js 开发体验

  • 方便的 Vuex 数据管理方案:方便构建复杂应用

  • 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload

  • 支持使用 npm 外部依赖

  • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

  • H5 代码转换编译成小程序目标代码的能力


请求

方式1:  flyio

方式2: wx.request


都需要二次封装,这里简单的列举下flyio的使用说明:

import Fly from  'flyio/dist/npm/wx'

let fly = new Fly
// 请求基础路径
fly.config.baseURL = process.env.BASE_API
//添加请求拦截器
fly.interceptors.request.use(async (request: FlyRequestConfig) => {
  ...
  return request;
})

//添加响应拦截器,响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use((response: FlyResponse) => {
  ...
  const { data, headers } = response
  return data
})



小程序直播

小程序里面的直播功能,官方有很简单的支持,有两种引入方式:

  1. app.json中添加分包以及插件,不要改变provider的appId
"subpackages": [
    {
      "root""packageA",
      "pages": [
        "pages/home/home"
      ]
    }
  ],
  "plugins": {
    "live-player-plugin": {
      "version""1.0.1",
      "provider""xxxxxxxxxx"
    }
  },
  2. app.json中直接添加插件,不要改变provider的appId
"plugins": {
    "live-player-plugin": {
      "version""1.0.1",
      "provider""xxxxxxxxxx"
    }

四、混合APP

1、APICloud

    一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App,且多端渲染效果统一。

特点

  • 易用:有 Vue、React 基础,可快速上手,配套专用的开发工具APICloud Studio3

  • 多端:一次开发,多端渲染,一个技术栈搞定移动端开发

  • 功能 API 丰富:提供 1千+ 模块和 2万+ API 可直接调用,面向行业和场景无限制


开发工具

APICloud Studio 3

云编译

根据需要我们可以选择编译对应的平台

调试

通过连接wifi,使用真机调试

APICloud经过几年时间的迭代,现在已经是一个成熟的框架了,小伙伴有对应需求可以放心使用这个方案。


2、React Native

    React Native 将原生开发的最佳部分与 React 相结合, 致力于成为构建用户界面的顶尖 JavaScript 框架。大多数情况下,使用 React Native 的团队可以在多个平台间共享一份基础代码

react native提供了一些核心组件





Demo

import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';

const App = () => {
  return (
    <ScrollView>
      <Text>Some text</Text>
      <View>
        <Text>Some more text</Text>
        <Image
          source={{
            uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
          }}
          style={{ width: 200, height: 200 }}
        />

      </View>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }}
        defaultValue="You can type in me"
      />

    </ScrollView>

  );
}

export default App;


请求

Fetch

打包

安卓:生成一个签名的 AAB 或 APK 包

苹果:Xcode 使用Release方案,产品→构建编译发布应用程序,最后将应用程序提交到 App Store。

五、总结

    在众多的技术框架中,筛选适合自己团队项目的解决方案,需要我们对对应的技术进行学习。    
    官方文档是最好的学习资料,大家平时遇到问题可以先到文档找下解决方案,在寻找的过程中也许会发现让你眼前一亮的知识点。    
在我们阅读完官方文档后,我们一定会进行更深层次的学习,比如看下框架底层是如何运行的,以及源码的阅读。
    这里广东靓仔给下一些小建议:
  • 在看源码前,我们先去官方文档复习下框架设计理念、源码分层设计
  • 阅读下框架官方开发人员写的相关文章
  • 借助框架的调用栈来进行源码的阅读,通过这个执行流程,我们就完整的对源码进行了一个初步的了解
  • 接下来再对源码执行过程中涉及的所有函数逻辑梳理一遍

关注我,一起携手进阶

如果这篇文章有帮到你,欢迎关注前端早茶,与广东靓仔携手共同进阶~

浏览 120
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报