Skip to main content

前端开发教程

移动端小程序开发

通过自定义小程序能够实现复杂的业务需求，小程序完全由开发者掌控，能够更自由的开发使用。如果需求较为简单，简单的自定义页面能够实现，建议使用ltn自定义页面开发。

技术栈

登录开发环境

  • 注册账号，因为开发工具的限制，必须登录账号才能使用，所以需要提前注册，在开发工具左下角登录使用。
  • 开发工具使用流程跟vs code类似，具体可以查看使用文档

组件库

  • uniapp官方UI库（推荐使用uniapp官方UI库，实现更好的跨平台兼容）
  • 插件市场，如果UI库中，没有合适的组件，可以到官方组件市场查找下载使用

创建项目

  • 点击菜单文件——》新建——》项目
  • 选择vue2项目，默认模板，其他默认即可
  • 注意：创建好项目后，修改以下内容。
"compatible": {
        "ignoreVersion": true
},

初始化H5-CCDK

import h5sdk from "uni_modules/h5-ccdk";
onLaunch: function (options) {
    const { BASE_URL, TOKEN, LANG } = h5sdk.initWgtCCDK(options, {
      default_TOKEN:"xxx",
      default_BASE_URL:"xxx" //默认：http://testdev.cloudcc.cn/ccdomaingateway
    });
  },
  • 支持的CCDK，其他api陆续集成
CCToken：getToken()
CCUser：getUserInfo()
CCCommon：post()
CCDetail：getDetailId()

创建页面

小程序的页面路径，通过项目中的pages.json进行管理，类似vue中的路由系统。详情请查看官方文档

  • 项目的页面都在pages目录中管理，在目录上鼠标右键——》新建页面
  • 页面创建完成后，pages.json中自动会添加此页面访问信息
  • path路径就是页面的访问地址。

运行测试

  • 点击项目中的 app.vue 入口文件，使其处于打开状态，点击菜单栏运行 -> 运行到手机 -> 运行到 android基座（选择标准基座） （注意：ios设备运行需要使用mac电脑）
  • android设备本地调试需要打开开发者权限，根据机型自行百度查找如何开启开发者权限。（以小米为例：设置->我的设备->全部参数->连续点击OS版本开启开发者菜单权限）
  • IOS App需要申请Appstore开发者认证，请自行到苹果开发中心申请。
  • 如果无法使用真机测试，可以使用运行到浏览器(不推荐)。

打包

  • 打包前需要去 manifest.json中修改应用版本名称 versionName，之后每次发版都需要修改，并且保证比上个版本的数值大。

versionName 应用版本号（App、Wgt）更新都需要此版本号versionCode wgt包无需设置（是打包app用于应用市场的判断）

  • 当功能测试完成后，选择菜单：发行 -> 原生App-制作应用wgt包。

发布与升级

  • 版本号需要与 manifest.json 文件中的应用版本名称保持一致，如下图。
  • 打包后，需要将文件开发者控制台->WGT->发布，App才能使用，每次发版，版本号必须比上一次大，否则App无法获取最新的小程序。
  • 版本号就是manifest.json中配置的应用版本名称

其他开发注意事项

  1. 必须使用支持 app-puls UI库，不要使用 for web 的组件库
  2. 必须使用 uni的api，不能使用DOM BOM 对象方法 例如alert docuemnt等浏览器对象
  3. 管理项目 多人开发打包 登录 （同一个）开发者后台进行项目管理

如何进行Debug

安装依赖

  • 进入开发项目，安装依赖
npm install eruda --save-dev

在组件中使用

  • 在自定义组件中导入和初始化debug插件
<template>
  <div class="cc-container">
    <HelloWorld />
  </div>
</template>

<script>
// 导入debug插件
import eruda from "eruda";
// 初始化debug插件
eruda.init();


import HelloWorld from "./components/HelloWorld.vue";
export default {
  components: {
    HelloWorld,
  },
  mounted() {
    // 接下来即可照常使用 `console` 等方法
    console.log("Hello world");
  },
  data() {
    return {
      componentInfo: {
        component: "component-cc-h5-debug",

        compName: "h5调试模版",

        compDesc: "H5页面在App调试默版",
      },
      isLock: false,
    };
  },
};
</script>
<style lang="scss" scoped>
.cc-container {
  text-align: center;
  padding: 8px;
  background: goldenrod;
}
</style>
  • 在移动端中查看，点击右下角小齿轮图标，打开控制台