当在小程序中通过 url 向 <web-view> 内嵌的 H5 传参时,当包含特殊字符时需要进行编码处理(不然 <web-view> 中是拿不到值的,小程序竟然没有错误提示...): 1.test.wxml <view> <web-view src="{{url}}"></web-view> </view> 2.test.js,对参数进行编码处理: Page({ /** * 页面的初始数据 */ data: {

微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡--> 详情查看 2.数据库设计分析 **所有表共有字段 *com ** [x] create_time 记录的创建时间 [x] update_time 记录最近的一次修改时间 动态表设计 circles_list 既然是仿朋友圈功能实现,那么数据实体必然包括 文字(主题内容) 和 图片. [x] co

### 移动端分享海报生成 最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5和小程序<br> 与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果

因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H5这些东西到底是什么?感觉是那么熟悉,单词拆分开每一个都认识,但是合在一起就完全不知道什么意思了,遂自行百度查询,自己解自己的惑吧. 个人博客,理解不具权威性. 一.WEB APP 通俗的理解,WEB APP 即为使用HTML.CSS.JS三大前端基础进行开发的WEB APP,是基于浏览器进行运行使

MpVue是什么 基于 Vue.js 的小程序开发框架 从底层支持 Vue.js 语法和构建工具体系. 使用vue开发小程序 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中 使用vue语法开发,编译为小程序语法 一套vue程序h5+小程序 Vue组件规范,熟悉vuejs即可开发小程序 比wepy工具对vue语法支持度更高 小程序的缺点 语法和html css不兼容,单独开发 学习成本 MpVue的能力 彻底的Vue组件化开发能力:提高代码复用性

现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我-- whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成. 最后和产品商量之后的决定是:小程序中特有的营销推广的页面,用小程序编写,剩下的黄金流程,内嵌H5解决. 听起来好像很简单,but,没有想象中那么简单. 判断是否在小程序中 这个问题,网上一搜,答案很多,有说用UA的,有说用微信注入的JS对象的,有说用原生提供判断方法的. UA的有一个很大的问题,iOS判断不

实现思路 那么既然小程序没有分享到朋友圈的api,我们怎么实现分享到朋友圈呢,下面我介绍一下实现思路. 既然没有捷径,那就走复杂一点的路线,那就是需要用户手动分享到朋友圈,问题又来了,用户手动分享的话,分享什么呢?我们其实在朋友圈应该已经看到不少带有小程序码的图片,特别是年前与年后,应该看到不少智行火车票,携程火车票分享到朋友圈的图片,帮助好友加速,用来抢火车票,还有像今日头条,分享新闻到朋友圈的方式. 他们共同的策略是生成一张带有小程序码的图片,小程序码包含了分享者的用户信息,我们把图片生成以

业务场景 在微信中 小程序无法分享到朋友圈,目前大部分的解决方案都是,canvas动态绘制 生成图片后,保存到用户相册,用户进行分享照片到朋友圈,朋友圈打开图片后识别二维码进入小程序,达到分享目的 github源码链接 https://github.com/richard1015/canvas 微信IDE代码预览 https://developers.weixin.qq.com/s/DBZhf8mB7qaD 海报需求设计图分析 图1分析: 可以看到海报 要求宽750 高1218(当然了数据是动态

开发文档 https://lbs.amap.com/api 错误状态 https://lbs.amap.com/api/webservice/guide/tools/info/ 虽然用的高德但是你还需要申请一个腾讯地图的key来使用getLocation API https://uniapp.dcloud.io/collocation/manifest?id=h5sdkconfig import amap from '@/static/lib/amap-wx.js'; // 只能用于小程序 co

1.h5跳转到小程序 首先引入js文件 <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> 跳转方法 ①跳转到小程序内页 wx.miniProgram.navigateTo({ url: '/pages/content/content', //url: '/pages/content/content?id=1', 传参 }); ②跳转到小程序tabbar页面 wx.mini

前端,特别是移动端如果对视觉还原要求比较高的时候.功能测试和性能测试完成之后.UI真的是一个像素一个像素的给你抠出来哪里还原不到位 之前项目要求还原度要达到98%以上.所以每到视觉还原的时候真的是挺痛苦的,这里记录一些视觉还原不同机型上的一些显示问题. 小程序iOS端1rpx显示2px宽度 这个视觉问题这真的是很痛苦的.我们想到针对iOS端单位1rpx,然后transform:scale(0.5);但是会导致个别安卓机型显示特别细,所以这个方案否决了. 最后使用的是http://www.cnbl

原理:canvas生成图片再保存到手机 JS onShow: function () { var that = this; //1. 请求后端API生成小程序码 // that.getQr(); //2. canvas绘制文字和图片 const ctx = wx.createCanvasContext('myCanvas'); var imgPath = '../../image/bn.jpg' var bgImgPath = '../../image/l11.png'; var xcxm =

今天主要了解微信小程序的框架结构以及环境部署等. 小程序的框架主要分为: js.json.wxss.wxml等 和java web的内容相似,主要了解内部代码的使用情况和语言方式. 主要写了页面的框架,页面翻转.视图等.

微信小程序带cookie的request请求可,以使服务端知道是同一个客户端请求. session_id会不变,从而很好的使用服务端的session. 写一个工具函数,直接导入使用即可,接口同 wx.request .会自动设置和更新 cookie. const request = function (obj) { //设置cookie缓存 if(obj.fail){ obj.fail = function(err){ wx.setStorageSync('cookie', err.header

前言 能用,但不是最好的方法,最好的还是fly,因为为了以后多平台的考虑,最好使用fly.js,做之前先关闭校验合法域名,因为我没在后台进行配置 后台进行配置合法域名,按着官方给的配置就OK了,这里就不写了,因为只是个测试,用的都是测试的appid https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html 目录结构 fly.js位于src下的utils目录下,最后在main.js引入 封装 这就

//网络类 //封装网络请求 const ajax = (ajaxData, method) => { wx.showLoading({ title: '加载中', mask: true }); console.log('use ajax', ajaxData.url) return new Promise((resolve, reject) => wx.request({ url: ajaxData.url, method: method || 'GET', data: ajaxData.d

// 在utils-->base.js中,封装一个Base类,有一个axios方法 class Base{ constructor(){ } axios(method,url,data){ console.log("调用到了axios") let method = method || "POST"; // 不传默认为POST方式 let rootUrl ="https://api.ichongwujia.com/pet-api/"; let

效果图: view <canvas id="radar-canvas" class="radar-canvas" type="2d"></canvas> style .radar-canvas width 550rpx height 550rpx margin 0 auto script <script> import { toRpx } from "@/utils/common" cons

话不多说直接上代码,清爽易懂: import { config } from '../config.js' const tips = { 1:'抱歉出现了一个错误', 2:'网络错误', 1005:'错误1', 1006:'错误2', } class HTTP { request(params) { if (!params.method) { params.method = 'GET' } wx.request({ url: config.api_base_url + params.url, m

// pages/bluetooth/bluetooth.js import { BluetoothMode } from '../../models/bluetooth.js' import {System} from '../../models/system.js' const bluetooth = new BluetoothMode() const system = new System() Page({ /** * 页面的初始数据 */ data: { devicesData: [],

1. view 标签中的属性 style 中的参数 margin-top:10px;  (向上距离) display : flex;  (display : flex 容器声明) flex-direction:    (view中布局的方向) row;    (横向布局 ,从左到右) column;    (垂直布局,布局从上往下) row-reverse; (横向布局 ,从右到左) column-reverse;(垂直布局,布局从下到上) flex-wrap: (当布局一行里面的数据无法全部显