关于html5:微信小程序开发内嵌h5开发心得

51次阅读

共计 5897 个字符，预计需要花费 15 分钟才能阅读完成。

微信小程序开发内嵌 h5 开发心得

受敌人委托给某公司开发微信小程序。原本是以原生开发、开发了一半，然而客户要求用 h5 开发，所以选用 uniapp 开发框架。之前没有微信小程序得开发教训；根本是对着文档、对着百度一步一步开发过去得，所以有必要总结一下

一、事先筹备

（1）小程序 app 申请 微信公众平台地址；根本就是对着腾讯要求进行填写审核


(2)抉择微信 appid。开发治理抉择 -> 开发设置

(3)下载微信开发者依据本人零碎状况下载即可

二、开发工作

1、小程序开发

  1. 用微信开发者工具新建我的项目，并输出申请得 APPID
  2. 批改微信小程序名称以及界面配置

  1. 开发标准和文档参考官网文档

  1. 之前是用 userinfo 受权，版本升级后用 getUserProfile 受权。附上代码
    index.wxml。template 局部代码

<view wx:if="{{isHide}}">
 <view wx:if="{{canIUse}}" >
  <view class='header'>
   <!-- <image src='/images/wx_login.png'></image> -->
   <icon class="icon-box-img" type="waiting" size="93"></icon>
  </view>
  
  <view class='content'>
   <view> 申请获取以下权限 </view>
   <text> 取得你的公开信息(昵称，头像等)</text>
  </view>
  <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindtap='bindGetUserInfo'>
   受权登录
  </button>
 </view>
 <view wx:else> 请降级微信版本 </view>
</view>

js 代码次要用到getUserProfile、getStorageSync、login 语法

var App = getApp()
Page({
  data: {
    // 判断小程序的 API，回调，参数，组件等是否在以后版本可用。canIUse: false,// 是否能够用 getUserProfile
    isHide: false,// 判断是否展现受权页面
  },
  onLoad: function () {
    var that = this;
    if (wx.getUserProfile) {
      this.setData({canIUse: true})
    }
    var user = wx.getStorageSync('user') || {};
    var userInfo = wx.getStorageSync('userInfo') || {};
    App.globalData.userInfo = userInfo;// 缓存用户信息
    App.globalData.userId = user.id;// 用户 id
    console.log('缓存的数据', user, userInfo)
    // 未采取信息
    if (user.id && userInfo.rawData) {
      wx.navigateTo({url: "/pages/webview/index"})
      // that.setData({
      //   isHide: false
      // });
      // this.login();} else {
      that.setData({isHide: true});
    }
    // // 查看是否受权
    // wx.getSetting({//   success: function (res) {//     if (res.authSetting['scope.userInfo']) {
    //       wx.getUserProfile({//         success: function (res) {
    //           App.globalData.userInfo = res;
    //           // 用户曾经受权过, 不须要显示受权页面, 所以不须要扭转 isHide 的值
    //           // 我这里实现的是在用户受权胜利后，调用微信的 wx.login 接口，从而获取 code
    //           that.login()
    //         }
    //       });
    //     } else {
    //       // 用户没有受权
    //       // 扭转 isHide 的值，显示受权页面
    //       that.setData({
    //         isHide: true
    //       });
    //     }
    //   }
    // });
  },
  // 关上受权界面
  bindGetUserInfo: function (e) {
    // debugger
    wx.getUserProfile({
      desc: '受权登录', // 申明获取用户个人信息后的用处，后续会展现在弹窗中，请审慎填写
      success: (res) => {
        App.globalData.userInfo = res;
        wx.setStorageSync('userInfo', res);
        this.setData({isHide: false});
        this.login()},
      fail: () => {wx.showToast({ title: '已回绝小程序获取信息，将无奈进入小程序，请受权之后再进入',icon:'none'});
      }
    })
  },
  login() {
    wx.login({
      success: res => {
        // 获取到用户的 code 之后：res.code
        console.log("用户的 code:" + res.code);
        // 能够传给后盾，再通过解析获取用户的 openid
        // 或者能够间接应用微信的提供的接口间接获取 openid，办法如下：wx.request({
          // 自行补上本人的 APPID 和 SECRET
          //  url: 'https://api.weixin.qq.com/sns/jscode2session?appid= 本人的 APPID&secret= 本人的 SECRET&js_code=' + res.code + '&grant_type=authorization_code',
          url: 'xx',
          method: "post",
          header: {'content-type': 'application/x-www-form-urlencoded'},
          data: {
            code: res.code,
            rawData: App.globalData.userInfo.rawData,
            secret: "f0a0818475ccd078edbcfde23a6bb02e",
            appId: "wx356c577df5a82dff"
          },
          success: res => {
            // 获取到用户的 openid
            console.log("用户的 openid:" + res.data.result.id);
            App.globalData.userId = res.data.result.id;
            wx.setStorageSync('user', res.data.result);
            this.setData({isHide: false});
            wx.navigateTo({url: "/pages/webview/index"})
          }
        });
      }
    });
  }
})

5、组件开发及援用

（1）内部组件引入我的项目中援用的是 vant-ui

下载安装放到指定地位

(2)开发组件

(3)组件应用

(4)开发语法请参考 vue 开发思维 数据传递、监听、事件发送、事件监听


6、webview 如何通信（通过参数传递）

7、插件如何引入（同声传译）


8、代码上传部署

2、h5 开发

1、下载 h -builder 开发工具

2、初始化我的项目


h5 和其余界面辨别开发是利用 #if 形式 条件解决

3、配置 h5 界面，次要对于界面的配置，比方 tabar、topbar、页面 title。色彩吧、背景、字体
根本和微信原生语法配置类似

4、配置地图（marker、polyline、定位、层级）采纳的 qq 地图，事后须要在 qqmap 中申请开发者的 key；而后以 script 标签的形式引 入

代码

initPolyline(map) {
                // 初始化不确定的
                this.unSurePolylines.map(item => {let points = item.points.split(";").map(pstr => {
                        return{latitude:pstr.split(",")[0],
                            longtitde:pstr.split(",")[1]
                        }
                    });
                    let path = points.map(p => {return new qq.maps.LatLng(p.latitude, p.longtitde)
                    })
                    let max = this.getMaxLatitude(points);
                    this.initLable({...max,name:item.name});
                    var polyline = new qq.maps.Polyline({
                        path: path,
                        strokeColor: '#38E9EB',
                        strokeWeight: 5,
                        name: item.name||"测试线 2",
                        strokeDashStyle: "dash",
                        editable: false,
                        map: map
                    });
                    qq.maps.event.addListener(polyline, 'click', (res) => {alert(res.target.name)
                    })
                })
                this.surePolylines.map(item => {let points = item.points.split(";").map(pstr => {
                        return{latitude:pstr.split(",")[0],
                            longtitde:pstr.split(",")[1]
                        }
                    });
                    let path = points.map(p => {return new qq.maps.LatLng(p.latitude, p.longtitde)
                    })
                    let max = this.getMaxLatitude(points);
                    this.initLable({...max,name:item.name});
                    var polyline = new qq.maps.Polyline({
                        path: path,
                        strokeColor: '#38E9EB',
                        strokeWeight: 5,
                        name: item.name||"测试线 2",
                        editable: false,
                        map: map
                    });
                    qq.maps.event.addListener(polyline, 'click', (res) => {alert(res.target.name)
                    })
                })
                // var path2 = points.map(item => {//     return new qq.maps.LatLng(item.latitude, item.longitude)
                // })
                // var path1 = points1.map(item => {//     return new qq.maps.LatLng(item.latitude, item.longitude)
                // })

                // var max1 = this.getMaxLatitude(points1);
                // this.initLable(max);
                // this.initLable(max1);
                // var polyline = new qq.maps.Polyline({
                //     path: path1,
                //     strokeColor: '#38E9EB',
                //     strokeWeight: 5,
                //     name: "测试线 2",
                //     editable: false,
                //     map: map
                // });
                // var label1 = this.getMaxLatitude(points);
                // var polyline1 = new qq.maps.Polyline({
                //     path: path2,
                //     strokeColor: '#E3C395',
                //     strokeWeight: 5,
                //     editable: false,
                //     strokeDashStyle: "dash",
                //     name: "测试线 1",
                //     map: map
                // });
                // qq.maps.event.addListener(map, 'click', function(res) {
                //     // debugger
                // });
                // qq.maps.event.addListener(polyline, 'click', (res) => {//     alert(res.target.name)
                // })
                // qq.maps.event.addListener(polyline1, 'click', (res) => {//     alert(res.target.name)
                // });
            },
            // 初始化点位
            initMakers(map) {
                this.areaPoints.map(item => {var latitude = item.center.split(",")[0];
                    var longtitde = item.center.split(",")[1];
                    var marker = new qq.maps.Marker({
                        icon: icon1,
                        map: map,
                        name:item.name,
                        position: new qq.maps.LatLng(latitude,longtitde)
                    });
                    this.initLable({...item,latitude:latitude,longtitde:longtitde});
                    qq.maps.event.addListener(marker, 'click', (res) => {alert(res.target.name)
                    })
                })

            },
            /** 初始化 label
             * @param {Object} item
             */
            initLable(item) {
                var cssC = {
                    color: "#fff",
                    fontSize: "12px",
                    fontWeight: "bold",
                    background: "#3a3d56",
                    borderRadius: "10px",
                    border: "none",
                    padding: "4px 10px"
                };
                var label = new qq.maps.Label({
                    // 如果为 true，示意可点击，默认 true。clickable: true,
                    // 标签的文本。content: item.name || "22",
                    // 显示标签的地图。map: this.map,
                    offset: new qq.maps.Size(-25, -40),
                    position: new qq.maps.LatLng(item.latitude, item.longtitde),
                    style: cssC,
                    visible: true,
                    zIndex: 1000
                });
            },

5、图片手势的放大放大

6、组件引入

vue 语法的组件引入形式

7、打包

8、nginx 部署

利用 uniapp 的代码公布之后，抉择服务器，进行 nginx 配置，并进行 https 的域名配置

三、h5 和 webview 通信

正文完
html5
发表至： html5
2021-05-15
 0
关于html5:YApi-可视化接口管理平台-内网部署小计
h5中video标签的使用
关于html5:你要找的Vue3干货都在这里了干不干你说了算
关于html5:在vue中使用HTML-5-拖放API