承接微信小程序开发。扫码加微信。
 
微信小程序开发交流qq群   581478349 ；
 
 
 
 
 
 小程序暂时没有办法跳到小程序之外 的界面   但是可以内嵌外部网页
 
如果是自己玩玩不需要上线的话 可以在开发工具中把不校验合法域名勾上
 
     需要上线的小程序一定要记得配置域名，不然上线后无法正常使用
 
      还有跳转的网址域名一定要是https打头的，不然也没法用
 
  <cover-view class='tiao' catchtap='gooutUrl'>跳转内嵌网页</cover-view>
 
 .tiao{
  position: fixed;
  bottom: 20rpx;
  background: rgba(55, 181, 239, 0.9);
  padding:10rpx 55rpx;
  border-radius: 50rpx;
  color: #fff;
  left: 50%;
  margin-left: -127.64rpx;
  z-index: 99
}
 
  // 调转内嵌网页
  gooutUrl: function() {
    wx.navigateTo({
      url: '../QR_code/QR_code', //调转页面路径
      success: function() {

      }, //成功后的回调；
      fail: function() {}, //失败后的回调；
      complete: function() {} //结束后的回调(成功，失败都会执行)
    })
  },
 
 
 
内嵌页面用web-view 引入外部网页的网址
 
<web-view src='https://www.baidu.com/'></web-view>
 
 

 
 
官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
 
 
web项目中引入jssdk
 
 
 
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 
 
而后项目中可以直接使用wx.等api
 
 
注意：在开发者工具中会出现导航栏遮住网页内容的情况，在手机中没有问题
 
 
问题：直接引入web-view会出现小程序导航没有返回键
 
 
 
解决办法：跳转之前，新建一个空页面，从这个空白页面跳转到web-view页面
 
 
修改页面title
 
打开的域名没有在小程序管理后台设置业务域名（注意是业务域名，不是服务器域名）
打开的页面必须为https服务
webview中的html的title会自动放到小程序的头部作为标题
<!--vue中-->
// 判断是否小程序环境，是则隐藏nav,修改title
let _this = this
wx.miniProgram.getEnv(function(res) {
  _this.envMiniprogram = !!res.miniprogram
  // 为小程序设置title
  _this.$route.meta.title = _this.$store.state.currentIMInfo.userProfile.nick
  _this.title = _this.$store.state.currentIMInfo.userProfile.nick
})

    前言：利用tp框架做网站首先现将制作好的前端HTML等文件集成到tp框架中在考虑功能逻辑如何实现。
前后台需要实现分离，前台在前台，后台在后台，公共放在public下，这样有利于管理，也有利安全


这里假装有一张img目录结构图，回头补上




引入前台模板页面：
    ①：首先将前台所有的CSS，js，img等文件全部copy到tp框架中的 /public/static/index 中；
    ②：在controller控制器下完善index首页对应的控制器，代码附上，就是继承Controller控制器，然后给index方法返回对应的视图界面（view）
<?php
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
    public function index()
    {
        return $this ->fetch();
    }
}
    ③：然后新建index首页视图，app/index/view/index新建一个index.html文件，里面存放视图代码，在里面修改所有错误的路径进行web访问




注意：完成上面的步骤基本上index首页就可以看到该有的效果了，所有的界面都是需要通过控制器去调用对应的视图界面，所以其他的界面都类似，完成一个其他的都不是问题，（控制器指向对应view）。






引入后台模板页面：

            首先新建一个后台的模块，在public/index.php中加以下代码

// 定义应用目录
define('APP_PATH', __DIR__ . '/../application/');
// 加载框架引导文件
require __DIR__ . '/../thinkphp/start.php';
// 自动生成admin模块
\think\Build::module('admin');
完成以后刷新网页，在打开项目就会有admin的一个基础模块，很方便。这个时候删除上方标红线的代码后继续完善后台模板
 后台和前台步骤一致，这里就不赘述了，完成所有的界面引入后就可以实现相关的功能了。入坑顺利.



小bug修复：
    完成模板的引入后会存在一些不是很严重的小问题，这里总结所有的问题并一一修复；

        ①：我们在html文件中引入css，js等文件基本上都是使用的绝对路径，当然这个没有什么错，可以正常访问，但是随着后期我们需要修改绝对路径中的文件名的时候，那工作量简直不要......

                一般情况下我们都是使用define定义一个常量，然后引入相关文件；

                在tp5中已经直接定义好了，我们只需要在 /applicattion/config.php中找到视图输出字符串转换进行设计即可

                      ‘自己定义的’=>‘替换的目录名称’      例如：‘__Colt__’ => '/static', 这样的话后期维护修改效率都会大大提升



        ②：仔细观察其实所有的网站中的各个界面都有一部分是相同的，比如head，bottom等，像这种情况的话我们完全可以把这部分抽离出来，等到再次调用的时候一行代码其实就可以改定。

                抽离就不说了，这个直接复制黏贴就ok。           
                例如：调用head和nav导航条

{include file="public/heads,public/nav"}

 

bug补充区域

1.IFrame引入，看看下面的代码

<IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME> 

你会看到一个外部引入的文件，但会发现有一个类似外框的东西将其包围，可使用：<iframe name="content_frame" marginwidth=0 marginheight=0 width=100% height=30 src="import.htm" frameborder=0></iframe>

但你会发现还会有点问题，就是背景色不同，你只要在引入的文件import.htm中使用相同的背景色也可以，但如果你使用的是IE5.5的话，可以看看这篇关于透明色的文章 如果想引入的文件过长时不出现滚动条的话在import.htm中的body中加入scroll=no



2.<object>方式

<object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>



3.Behavior的download方式

<span id=showImport></span> 

<IE:Download ID="oDownload" STYLE="behavior:url(#default#download)" /> 

<script> 

function onDownloadDone(downDate){ 

showImport.innerHTML=downDate 

} 

oDownload.startDownload(＇import.htm＇,onDownloadDone) 

</script>