正在加载....
厦门网站建设-世敏网络科技
  • 当前位置: 首页 > 建站百科 > 网站建设
  • 手机网页与微信小程序同步

    时间:2019-06-06 浏览量:

    前置条件:

    1、自行申请注册小程序账号

    2、网页开通HTTPS

    具体步骤如下:

    1、下载微信开发者工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

    2、安装好之后,打开微信开发者工具,选择小程序项目



    手机网页与微信小程序同步(图1)

    3、点击管理项目后侧加号(界面右下角)

    手机网页与微信小程序同步(图2)

    _ueditor_page_break_tag_

    4、打开新建项目界面,选择项目目录,输入APPID、项目名称,确定

    手机网页与微信小程序同步(图3)

    5、打开app.json文件,将pages项目中多余的代码删除,navigationBarTitleText项目对应的小程序名字,修改一下,点击顶部菜单:文件,保存。

    手机网页与微信小程序同步(图4)

    6、打开/pages/index/index.wxml文件,将文件中内容清空,粘贴一下代码:

    <web-view src="https://www.xmsmwl.cn"></web-view>

    手机网页与微信小程序同步(图5)


    _ueditor_page_break_tag_


    7、届时,左侧预览窗口会出现预览界面,但是在未设置的情况下,会出现类似以下页面(不支持打开非业务域名https://www.xmsmwl.cn,请重新配置。)

    手机网页与微信小程序同步(图6)

    此时,登录微信小程序管理页面,依次点击:设置、开发设置。

    手机网页与微信小程序同步(图7)

    将页面向下滚动,找到业务域名区域,点击开始配置。

    手机网页与微信小程序同步(图8)

    管理员扫码确认

    手机网页与微信小程序同步(图9)

    下载校验文件,上传至网站根目录,在业务域名处输入对应的域名,保存。

    手机网页与微信小程序同步(图10)


     如果校验文件未上传,则无法保存,会出现“文件校验失败。若已上传文件,可根据指引自查。”的提示。

    手机网页与微信小程序同步(图11)

    保存成功后效果如下:

    手机网页与微信小程序同步(图12)


    _ueditor_page_break_tag_

    8、回到微信开发者工具,再次在index.wxml文件中点击保存,左侧可出现正确的预览,如下图: 

    手机网页与微信小程序同步(图13)

    9、点击右上角上传

    手机网页与微信小程序同步(图14)

    10、上传时,会弹出确认页面,一次输入版本号,项目备注,点击上传。这里需要注意的是版本号只能是字母、数字、小数点。

    手机网页与微信小程序同步(图15)

    11、回到微信小程序操作页面,

    手机网页与微信小程序同步(图16)

    点击开发管理,找到刚才提交的版本,点击后面的提交审核。


     


    加载中~

    您已成功复制微信号,去微信立即添加好友!

    点击下方复制按钮,复制微信号!

    jzm866081

    https://www.xmsmwl.cn
    厦门世敏网络科技有限公司

    点击这里给我发消息
    嘿!有什么能帮到您的吗?