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

头像
西安小哥
    阅读 11 分钟
    English
    1

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

    受朋友委托给某公司开发微信小程序。本来是以原生开发、开发了一半，但是客户要求用h5开发，所以选用uniapp开发框架。之前没有微信小程序得开发经验；基本是对着文档、对着百度一步一步开发过来得，所以有必要总结一下

    一、事前准备

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

    image.png
    (2)选择微信appid。开发管理选择->开发设置

    image.png

    (3)下载微信开发者根据自己系统情况下载即可

    image.png

    二、开发工作

    1、小程序开发

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

    image.png

    1. 开发规范和文档参考官方文档

    image.png

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

    image.png

    <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

    下载安装放到指定位置
    image.png

    (2)开发组件

    image.png

    (3)组件使用

    image.png

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

    image.png
    image.png

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

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

    image.png
    image.png

    8、代码上传部署

    image.png

    2、h5开发

    1、下载h-builder开发工具

    image.png

    2、初始化项目

    image.png
    h5和其他界面区分开发是利用#if方式条件处理

    3、配置h5界面，主要关于界面的配置，比如tabar、topbar、页面title。颜色吧、背景、字体
    基本和微信原生语法配置相似

    image.png

    4、配置地图（marker、polyline、定位、层级）采用的qq地图，预先需要在qqmap中申请开发者的key；然后以script标签的方式引入

    image.png

    代码

    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
                });
            },

    image.png

    5、图片手势的放大缩小

    image.png

    6、组件引入

    vue语法的组件引入方式

    7、打包

    image.png

    8、nginx部署

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

    image.png
    image.png

    image.png

    html5微信小程序
    西安小哥
    1.3k 声望88 粉丝

    thinking、doing、do better、do much better than today。exchange 、sharing、improve as quickly as possible。

    « 上一篇
    react种子框架
    下一篇 »
    Cesium开发实践

    引用和评论

    推荐阅读
    头像
    人工智能与人类未来如何共存

    西安小哥阅读 793

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.5k评论 3

    头像
    面向企业级前端应用的开发框架 UI5 的发展简史介绍

    注销赞 5阅读 7.6k

    头像
    一个简易的DIY场景H5框架

    Undefined_0赞 5阅读 5k

    头像
    使用 URLSearchParams 轻松操作 URL

    tiee赞 1阅读 4.5k

    头像
    svg之viewBox

    zxl20070701赞 3阅读 1k

    0 条评论
    得票最新