跳到主要内容

uniapp上手指南

官方文档​

https://uniapp.dcloud.io/

UI​

https://www.uviewui.com/

框架​

https://uniapp.dcloud.io/collocation/pages

API​

https://uniapp.dcloud.io/api/README

clone源码​

git clone https://gitee.com/bbc-se/mobile-ui.git  --branch 5.2.3

工程核心目录​

config配置的api地址
manifest.json基础配置
api所有后台接口地址
pagesvue页面
mine-module、goods-mdule子模块
static静态文件
ui-utils utils工具类
unpackage打包输出目录

配置​

在运行、发布前需要做一些相关配置

修改config/config.js中的api地址及wap 站地址：

api地址​

const api = {
    // 开发环境
    dev: {
        base: 'https://base-bbc-api.shoptnt.cn',
        buyer: 'https://shop-bbc-api.shoptnt.cn',
        im: 'https://api.shoptnt.cn/im'
    },
    // 生产环境
    pro: {
        base: 'https://api.shoptnt.cn/base',
        buyer: 'https://api.shoptnt.cn/buyer',
        im: 'https://api.shoptnt.cn/im'
    }
}

wap 站地址​

/**
 * wap(h5)站地址
 */
const domain = {
    //开发环境
    dev: {
        wap: 'http://127.0.0.1:8080'
    },
    //生成环境
    pro: {
        wap: 'https://m-v722.javamall.com.cn:81'
    }
}

运行​

H5运行​

必要条件​

1、安装HBuilderX

下载地址： https://www.dcloud.io/hbuilderx.html

2、浏览器

运行步骤​

点击菜单栏：运行 → 运行到浏览器 → 选择要使用的浏览器

微信小程序运行​

必要条件​

1、HBuilderX

2、安装微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

运行步骤​

点击菜单栏：运行 → 运行到小程序模拟器 → 微信开发者工具

注：开发时 manifest.json 配置文件中的 微信小程序不需要配置 APPID，否则微信开发者工具只允许设置好的api域名。开发调试微信登录，支付的时候再配置。

APP运行​

安卓及ios​

必要条件​

1、HBuilderX

2、手机开启开发者模式，允许USB调试（ios端仅限mac）

运行步骤​

点击菜单栏：运行 → 运行到手机或模拟器 → 选择连接的手机

打包发布​

H5打包发布​

必要条件​

HBuilderX

打包步骤​

1、确保在config/config.js文件中配置好api和domain的域名

2、点击菜单栏：发行 → 网站-H5手机版 → 配置网站标题和网站域名

3、查看控制台输出的h5路径，h5文件夹就是我们打包后的h5

4、将h5文件夹上传到服务器，放在nginx虚拟目录中即可

示例：

server {
      listen       81;
      server_name  wap-bbc.shoptnt.cn;
      location / {
        root   /yourpath/h5;
        try_files $uri $uri/ /index.html $uri/ =404;
        index  index.html index.htm;                 
      }
    }

微信小程序打包发布​

体验版发布​

必要条件​

HBuilderX，微信开发者工具

发布步骤​

  1. 申请如下账号

微信公众号、微信支付商户号、微信小程序号、开放平台账号

参考文档：

https://shoptnt.feishu.cn/docs/doccnXcVxTE8vOuOhLt6aXyQP9d

  1. 在config/config.js文件中配置好api和domain的域名

2、点击菜单栏：发行 → 小程序-微信 → 填写微信小程序名称与开发者APPID

3、进入微信开发者工具，点击上传

​ img

4、设置为体验版

登录微信公众平台 https://mp.weixin.qq.com

点击版本管理，选为体验版本，设置页面路径后扫描二维码即可

页面路径使用 pages/tabs/home/home

​ img

正式版版发布​

必要条件​

HBuilderX，微信开发者工具

发布步骤​

  1. 申请如下账号

微信公众号、微信支付商户号、微信小程序号、开放平台账号

参考文档：支付参数申请

2、在config/config.js文件中配置好api和domain的域名

3、点击菜单栏：发行 → 小程序-微信 → 填写微信小程序名称与开发者APPID

4、进入微信开发者工具，点击上传

​ img

5、提交审核

登录微信公众平台 https://mp.weixin.qq.com

点击版本管理，找到上传的小程序，提交审核，设置页面路径后扫描二维码即可

页面路径使用 pages/tabs/home/home

​ img