找回密码
 立即注册
查看: 7405|回复: 3

ourphp 整合微信小程序教程和相关操作提示

203

主题

203

主题

203

主题

管理员

Rank: 9Rank: 9Rank: 9

积分
0
admin 发表于 2018-3-27 19:07:21 | 显示全部楼层 |阅读模式
一 , 申请微信小程序
      登陆 http://weixin.qq.com 申请小程序账号,并登陆获取 APPID (保存好,一会有用)
屏幕快照 2018-03-27 18.42.16.png

二 , 添加合法域名和业务域名
      1) 合法域名分别添加
      https://app.yidacms.com   (换成你自已的域名 , 就是你在小程序设置的业务域名)
      https://apis.map.qq.com   (这里添加腾讯的地图,那么OURPHP后台要插入腾讯地图的坐标)


      2) 业务域名添加
      https://app.yidacms.com  (换成你自已的域名 , 就是你在小程序设置的业务域名)
      (注:其它小程序相关信息自行设置就可以了,比如头像名称等.)

屏幕快照 2018-03-26 22.45.20.png

      3) 下载微信开发工具, https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
          微信开发工具的安装 我们不在这里说明. 微信开发工具的使用请在微信官方了解.

      4) 用微信开发工具创建小程序(输入储存路径和appid)
屏幕快照 2018-03-27 18.37.03.png

小程序的相关说明和开发教程 在二楼和三楼.




203

主题

203

主题

203

主题

管理员

Rank: 9Rank: 9Rank: 9

积分
0
 楼主| admin 发表于 2018-3-27 19:29:03 | 显示全部楼层
我们实际推荐使用小程序开发方案二:
教程地址:在本贴三楼




开发方案一:

一、与OURPHP对接数据
      1) 下载   OURPHP原生小程序开发包.zip (适用开发方案一,如果用开发方案二 看三楼)
          下载地址:https://pan.baidu.com/s/1Bq-TyI8D3Hl7uox-7lwTxw
105123b0vqvkr14ridvrjd.png



二、把刚才在百度盘下载的 api文件上传对应位置:
          如下:
          1=> 独立版PHPapi -> /wxapp/ 整个目录上传至 ourphp /function/api/ 目录内
          2=> 独立版PHPapi ->  /ourphpwxapp/ 整个目录上传至 ourphp /client/plus/ 目录内
          3=> 登陆后台 -> 运营 -> 插件 -> 安装新插件 -> 安装 微信小程序插件 (安装好后,设置小程序的导航栏和地图位置,地图位置的格式会在2楼教程中写)
          4=> 以上步骤完毕后, 把 /ourphp小程序源码/ 目录内的所有文件夹和文件,覆盖到你创建好的小程序本地目录中 。(小程序开发工具创建的小程序目录)
          这个时候小程序页面如下:

110307z2m58ri25z8r5sm8.png

       5=>用微信开发工具,打开/pages/op/ourphp.js  , 按照上面的说明配置相关域名。

       ALT+S 键 保存, 小程序即对接完毕.



首先说明这种属于小程序原生开发,采用AJAX方式请求服务器数据。这种的好处在于速度快,体验好。但是维护和开发成功较高,您要有一定的开发代码的经验。我们并没有对此代码做过多的UI设计和美化,需要你根据自已的美感来设计或调整。这个原生开发包只是把接口都写上去了,你可以参考并配合你的UI来用。

除小程序UI外
加载H5页面的UI  都在  开发包 /wxapp/ 目录里修改PHP文件来美化。(或者找我们帮你美化,支付少许费用)


小程序导航栏的设置

     1) 目前小程序中,只支持 新闻,单页,产品(不含商城),图集,下载,招骋,视频  这7个模型的栏目.管理小程序栏目可以在后台->运营->插件中管理和选中要在小程序里展示的栏目.   除此之外的  外部链接 类型的栏目不支持,因为小程序不可以外部跳转.

     2) 公司地图位置的设置格式为 : 45.367434#126.319170#哈尔滨伟成科技有限公司   
         分别为  经度#纬度#公司信息  注意用#格开,  公司信息可以自由设置, 比如可以输入电话号码等.  公司信息换行用  \n 来表示
目前ourphp对接小程序的能力说明

      1) ourphp一直就是不管什么端,都和ourphp数据做到互通. 小程序也不例外. 小程序的数据全部来自 ourphp后台.也就是说目前ourphp一个后台发布信息,即互通到 PC / 手机 / 微信 / APP / 小程序中

      2) 目前为V1.1.0版本 对接程序以企业展示型为主. 不支持商城(需要商城的我们可以另外开发). 目前不支持的有:
          商城,会员中心,组图,视频播放,文件下载 (除商城外,其它功能我们在下一版本全部开发开放)

小程序方面的设置

    小程序方面的设置需要通过 weixin.qq.com或者微信开发工具来设置.   设置小程序的标题和头部颜色等可通过小程序开发工具来设置.
打开 app.json 来设置.

{
  "pages":[  //以下为路由页面,不需要改
    "pages/index/index",
    "pages/article/article",
    "pages/article/articleview",
    "pages/product/product",
    "pages/product/productview",
    "pages/photo/photo",
    "pages/photo/photoview",
    "pages/down/down",
    "pages/down/downview",
    "pages/video/video",
    "pages/video/videoview",
    "pages/job/job",
    "pages/job/jobview",
    "pages/about/about",
    "pages/search/search",
    "pages/map/map"
  ],//设置相关参数
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff", 背景色
    "navigationBarTitleText": "微信接口功能演示",  标题
    "navigationBarTextStyle":"black"
  }
}

201609231432565561.jpg


自已开发小程序模板


    首先,如果你有一定的基础是可以开发小程序的模板的.但是小程序的语法和我们的HTML还是有区别的.小程序有自已的语法. 比如  view
如果你需要修改模板来样式或布局可通过  路由页面模板和 wxss 来修改.  

    wxml = html
    wxss = css


所以 要是想开发模板 先学习一下小程序的文档和接口  https://mp.weixin.qq.com/debug/w ... x.html?t=1522150089










203

主题

203

主题

203

主题

管理员

Rank: 9Rank: 9Rank: 9

积分
0
 楼主| admin 发表于 2021-10-31 17:24:35 | 显示全部楼层
开发方案二(推荐):

这种开发方案我们比较推荐,就是小程序加载你的OURPHP 移动端的H5页面。这种开发和维护成本较低。而且UI或功能发生变化时,小程序跟随变化。不需要在提交审核小程序了。 但是这种需要你的服务器速度快,不然用户体验感不好。但好处就是开发和维护快,功能全,UI设计更方便,支持商城等。

一、小程序配置
相关的域名配置和上面说的一样,按照一楼方法配置就行了。 必须支持HTTPS 、OURPHP的版本必须在V3.8.0或以上


二、与OURPHP对接数据
      1) 下载   OURPHP H5小程序开发包.zip
      下载地址:https://pan.baidu.com/s/1Bq-TyI8D3Hl7uox-7lwTxw


V8.0.1或以上版本 ,省略第三步
三、把开发包里面的/appletspay/文件夹 全部上传到你的OURPHP  /function/api/ 目录内
       把 /ourphp小程序源码/ 目录内的所有文件和文件夹 , 覆盖到 你创建小程序的本地目录内  并覆盖。


四、修改一处域名配置
       var weburl = 'https://www.ourphp.net';  不能以/结尾
       1 app.js

这三处的网站地址换成你在小程序开发管理中设置的业务域名即可。
此时,你的小程序保存就可以提交审核了

v8.1.0或以上版本,省略第五步
五、OURPHP网站目录  /templates/wap/cn/cn_shoppingorders.html 这个模板文件
把 微信支付地址 从原来的 [.$webpath.]function/api/weixinh5pay/jsapi.php
替换成  [.$webpath.]function/api/appletspay/jsapi.php注:如果不使用余额等其它方式支付,只用微信支付的话,可以把form中的地址替换成[.$webpath.]function/api/appletspay/jsapi.php


关于微信支付的配置请去:https://www.ourphp.net/club/foru ... d=12&extra=page%3D1


注意以下几点,小程序支付和H5网页公众号支付APPID和授权目录不一样。
第一:登陆微信商户平台,JS支付产品中的 授权目录要填加 https://你的域名/function/api/appletspay/
第二:登陆小程序平台,生成小程序AppSecret(在开发管理-》开发设置里),并把你服务器IP设置为白名单IP
第三:把小程序APPID和小程序AppSecret放到OURPHP后台 -》全局-》API管理-》微信手机端H5支付接口 如图:
Xnip2023-04-10_22-48-20.jpg
APPID是小程序APPID,
APPSECRET是小程序的AppSecret
不要在写公众号的了,因为咱们是小程序支付了。


商户号和keys写商户平台里的。




第四:在商户平台-》产品管理-》APPID绑定里,要绑定这个小程序,然后登陆小程序授权绑定就可以了。
Xnip2023-04-10_22-47-09.jpg



小程序文件包里  project.config.json 中的APPID替换成自已小程序的APPID

微信支付开通JSAPI支付,添加授权目录2个
一、 https://你的域名/
二、https://你的域名/function/api/appletspay/

注:
交易类型的小程序(如商城)小程序要求提交一个订单中心path设置
直接path路径写    /pages/pay/pay
配上这张图:

捕获.JPG


基本就能过审,如果没有过审


path路径写    /pages/order/order
把下面的html([url=]apporder.html[/url])文件 上传到你的网站根目录。在尝试申请。
apporder.html (7.47 KB, 下载次数: 0)

203

主题

203

主题

203

主题

管理员

Rank: 9Rank: 9Rank: 9

积分
0
 楼主| admin 发表于 2023-4-15 18:01:22 | 显示全部楼层

接入小程序客服


小程序嵌入H5页面是无法调起小程序客服的,如果通过H5页面转回小程序页面,在调起小程序客服。
首先,开通客服并绑定客服微信号。登陆小程序后台->左侧->客服->绑定客服

h5页面引入:
  1. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
复制代码
或1.6版本都可以

转回小程序页面:
  1. <a href="javascript:wxurl('/pages/kefu/kefu');">联系我们</a>
复制代码


小程序 /pages/kefu/kefu.wxml
  1. <button class="kefu" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">联系在线客服</button>
复制代码



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表