uniapp版本使用需要有一定的基础的，否则建议使用原生demo。因为uniapp需要考虑到兼容不同平台，所以有时候代码会稍微多点。

uniapp版本demo对接流程：
1、下载uniapp版本之后，用Hbulidex打开项目，然后用Hbulidex打开文件：manifest.json，你需要在这里边配置你的小程序基本信息（需要用到哪个填写那个即可）


2、打开util下的config.js配置文件：


3、配置玩config.js之后，一般小程序首页内容仍然出不来，那是因为需要配置首页各个栏目catid，需要和你后台的栏目catid一直，打开paegs/index/index.vue



4、配置完首页之后，基本所有的数据就出来了，如果仍然没数据，可以联系我提供技术支持，也可以自己调试。
一般调试方法为，打开小程序开发者工具---调试器---network---xhr，重新编译项目，然后随便点个请求，然后找到请求里边的Preview，里边一般会给你报错误信息。如果是空白可以打开网站根目录下的index.php开一下debug调试

1. // 是否是开发者模式（1开启、0关闭） 
2. define('IS_DEV', 1); 

5、H5版本跨域问题
小程序版本一般没有跨域问题，但是H5容易跨域，最简单的解决办法就是把前端和网站部署到同一个域名下，但是往往我们在调试阶段是本地测试的，所以需要对uniapp做个简单配置：
用Hbulidex打开项目下的manifeast.json找到最下边的“源码试图”，然后找到h5设置项，如果没有则手动添加。添加如下代码：

1. "h5" : { 
2.         "devServer": { 
3.             "disableHostCheck" : true, 
4.             "proxy": { 
5.                 "/api": { 
6.                     "target": "http://www.xunrui.com", //您的域名
7.                     "changeOrigin":true, 
8.                     // "secure" : false, 
9.                     "pathRewrite":{"^/api":""} 
10.                 } 
11.             }, 
12.             "https" : false 
13.         } 
14. } 

同时找到util下的config.js里边的baseURL改成：baseURL: '/api/',保存即可，记得一定要关闭项目，重新编译h5端，否则会报404错误。
第二种解决跨域的办法是：在uniapp项目下创建文件vue.config.js，配置内容和上面一样，但是两个方法不能同时用，会引起冲突


其他对接注意事项：
1、component/list/list.vue是列表样式组件，内置了6种列表样式，使用方式：

1. <Lists listtype="3" :list="news"></Lists> 

需要注意的事：list组件默认的全是内容页。如果需要不同模块指向不同的内容页。需要做如下调整：
（1）所有的：@click='goDetail(item.id)' 批量替换成：@click='goDetail(item.id,item.tablename)'
（2）找到goDetail方法，根据不同的tablename调用不同的内容url，例：

1. goDetail(id,tablename){ 
2.     var url = '/pages/detail/detail?id='+id; 
3.     if(tablename == 'products'){ 
4.         url = '/pages/products/detail?id='+id; 
5.     } 
6.     this.$common.goto(url); 
7. } 

2、小程序表单对接/pages/formguide/formguide.vue,

1. <input type='text' name='tablename' value="message" :hidden='true'/> 

上面的value必须是你的表单的别名，获取方式：后台--设置--内容设置--网站表单--别名
另外小程序表单不是自动生成的，需要你根据后台字段添加对应的input，name和你后台字段名称一致，然后对应的submitFrom()方法里边，可以对你的字段做一些简单前端判断，例禁止为空，检测手机号，检测长度等

3、授权页面/pages/auth/auth，使用之前需要先给后台会员表添加字段‘openid’
目前授权页面包含账号密码登录、小程序一键授权、手机号授权，其中手机号授权必须需要现申请权限，没有权限最好是注释掉。目前一键授权支持百度、微信、抖音、快手等，一键获取手机号支持百度、微信、抖音等
另外支持账号注册功能，目前支持账号、手机号、密码，如需要邮箱，直接开启对应注释即可（对应接口的reg方法里边亦需要开启邮箱接受）

4、tabbar效果
目前采用的是隐藏官方自带的tabbar，启用自定义tabbar组件，并且默认pages/index/index，pages/member/index/index为tabbar页面。可以去config.js里边的tindex规定需要高亮的栏目，也可以在每个页面自己规定tindex的值

5、tag页面，使用tag方法之前必须需要先安装tag模块，并且tag.vue里边获取到的文章是全站所有模块的文章，如果需要区分不同文章指向不同url，可以和list组件一样自己规定一下

1. goDetail(id,tablename){ 
2.     var url = '/pages/detail/detail?id='+id; 
3.     if(tablename == 'products'){ 
4.         url =  '/pages/detail/detail?id='+id; 
5.     } 
6.     this.$common.goto(url); 
7. }, 

6、扩展接口，目前支持comment、zan、support、favorite等
comment：评论接口，需要先安装官方自带的comment模块
zan：点赞接口，需要先安装官方的点赞模块
support：支持接口，需要先安装官方的支持评论模块，可以给每条评论点赞或者踩
favorite:收藏接口，需要安装官方的收藏模块


常用函数封装
comm.js：
1、getmenu(0),获取所有父栏目为0的栏目（即获取所有一级栏目）
2、get_cat()：以promise方式返回所有栏目信息，并转成以catid为主键数组，并存入缓存，也可以直接调用
3、get_sys():以Promise方式返回后台小程序信息和网站设置信息，并存入缓存
4、getListtype(10) 获取某个栏目的列表类型
5、getUrl(10)：获取栏目10的url，会根据自定义路由返回对应url
6、getTindex(10)：获取栏目10的高亮索引，10以及10的父级栏目存在的话则返回对应索引
7、callphone()方法，会自动调用后台小程序设置里边的电话，直接拨打
8、get_catlist(10),获取某个栏目的子栏目或者兄弟栏目，子栏目优先
9、get_pagelist();获取所有单页面
10、get_childid()获取某个栏目的子栏目
11、get_brotherid()获取某个栏目的兄弟栏目
12、backhome()返回首页封装
13、pages()封装分页，用于列表分页展示分页按钮情况
14、goto(url),url跳转方法，建议都用该方法，该方法可以自动判断栈，防止栈溢出造成的不跳转（默认栈深度10，快手为6）

util.js下
1、formatTime() 格式化时间戳
2、escape2Html() 转义常见符号
3、removeHTML() 去掉html代码
4、checkPhone()检测手机号是否合规，
5、checkEmail()检测邮箱是否合规

上一篇：安装流程
下一篇：最后一页