weapp

模拟器正常，真机不能显示商品信息，如价格图片 这个问题之前在2018年年中，使用在bmob的js sdk时，也有遇到，因为是微信升级了导致的能获取到条数，但是就是不能渲染除了createdAt等元数据以外的字段。 当时的解决方法是自己写了一个utils类，将结果数组遍历了一番，然后再丢给wxml去渲染，当然到前一阵子，将bmob的sdk也升级到v2.0以上，所以这问题消失也无影无踪了，同理，leancloud这里，也是时候升级一下sdk了。 引入类库 使用npm命令安装库， npm install leancloud-storage --save 然后工程设置中启用 使用npm模块 再有就是将小程序的基础库支持版本提高，2.2.1开始支持npm模块，详情可以看之前的文章 搞了好久才明白怎么在小程序下使用npm包 再在工具->构建npm，代码中引入 const AV = require(leancloud-storage) 报错core-js/promise未定义 没出这个坑，然后老老实实用回引入.js文件的方式来解决 下载2个js文件， https://cdn.jsdelivr.net/npm/leancloud-storage@4.6.1/dist/av-core-min.js ， https://cdn.jsdelivr.net/npm/@leancloud/platform

1、 在新建的小程序目录下 npm init -y 生成package.json文 2、npm 安装vant npm i @vant/weapp -S --production 3、选择微信开发者工具下的构建 npm 4、选择详情中使用npm模块 5、使用 在app.json或index.json中引入组件，详细介绍见快速上手 "usingComponents": { "van-button": "@vant/weapp/button/index" } 在页面中使用vant标签 <van-button type="primary">主要按钮</van-button> 来源： oschina 链接： https://my.oschina.net/u/2612473/blog/4906346

在微信小程序下会用到wxParse这个东西来达到html转换wxml的效果， taro小程序官方也给出了示例， 地址 这里封装成自己的组件： import Taro, { Component } from "@tarojs/taro" import { View } from "@tarojs/components" import WxParse from '../../utils/wxParse/wxParse.js' import "../../utils/wxParse/wxParse.scss" export default class ParseComponent extends Component { componentDidMount() {} defaultProps = { mark: "" } render() { if ( this .props.mark) { let domText = this .props.mark WxParse.wxParse( "domText", "html", domText, this .$scope, 5 ); } return ( <View> {process.env.TARO_ENV === "weapp" ? ( <View> <import src='../../utils/wxParse/wxParse

前言 — 在 web 开发场景，减少代码体积虽然是性能优化的一个方向，还没到锱铢必较的程度。但是在小程序场景，由于代码包上传阶段限制了主包 2M 和总包 16M（近期微信官方正在内测将总包上限调整至 20M ）的尺寸，超过就会面临无法发版的风险，代码包体积的优化就变得特别重要了。京喜小程序首页作为微信购物的大入口，承载大量流量，功能复杂模块众多，又要与其他核心业务和公共组件共享 2M 的主包空间，因此代码包瘦身的工作在持续不断进行，否则无法满足业务的快速增长。本文将结合以往优化策略与最近一次的瘦身实践，分享小程序代码瘦身的经验与思考。 常见的瘦身方式 — 京喜首页项目是一个优化良好的项目，对于常见的优化措施，已经有过很好的实践，就让我们我们先回顾一下有哪些常见的优化策略吧： 代码分包：将相对独立的页面和组件拆分到分包，可以解决主包体积受限问题； 依赖分析：移除未引用的页面、组件和其他文件； 避免使用本地资源：除了兜底图片，其他都尽可能使用 url 的方式，由于 base64 图本质上是将信息编码成长字符串，也会占用很多空间，不建议使用； 对所有类型的文件都进行压缩并清理注释，包括了：js、wxml、wxss、json； 此外，京喜首页团队还针对 Taro 开发场景进行了如下优化： 分析出编译后每个文件的高频重复代码（如处理兼容性的 pollyfill 代码），拆分生成公共文件

1.下载好稳定版的微信开发者工具 2.创建小程序项目文件夹（如：testDemo） 3.建好用开发者工具编译器打开 然后初始化package.josn 执行安装 vant Weapp： npm i @vant/weapp -S --production 勾上增强编译和使用npm模块 接着点击工具构建npm在对应页面的.json文件 或者在 app.json文件如下图配置 若后面文档更新则按官方文档 和 ui库更新文档配置既可；然后组件在各页面所需之处用既可; 来源： oschina 链接： https://my.oschina.net/u/4396566/blog/4274445

1.首先建立 custom-tab-bar 文件夹 包含 index.js index.json index.wxml // index.js文件 Component({ data: { active: 0 , list: [ { "url": "/pages/index/index" , "icon": "wap-home-o" , "text": "首页" }, { "url": "/pages/index/prize" , "icon": "orders-o" , "text": "奖品" }, { "url": "/pages/index/exchange" , "icon": "points" , "text": "兑换" }, { "url": "/pages/index/my" , "icon": "user-circle-o" , "text": "我的" } ] }, methods: { onChange(e) { console.log(e, 'e' ) this .setData({ active: e.detail }); wx.switchTab({ url: this .data.list[e.detail].url }); }, init() { const page = getCurrentPages().pop(); this .setData(

抠图效果 引言 上次写了一篇用小程序实现ai抠图，就差一步可以能在小程序全盘使用第三方库去抠图，苦于不能将Buffer图片源转成base64赋给 <image> ，上了node.js后端去实现，这两天突然想起可以用云函数去实现，果断用云函数代替自己写后端。 纯微信小程序端实现ai抠图代码如下： wx.chooseImage({ count: 1, // 默认9 sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: res => { var tempFilePaths = res.tempFilePaths const file = tempFilePaths[0] this.setData({ origin: file }) console.log(file) wx.uploadFile({ header: { 'X-Api-Key': 'your key' }, url: ' https://api.remove.bg/v1.0/removebg', filePath: file, name: 'image_file', success: res => { const data = res.data

最近在开发小程序，身心疲惫，原因是功能和app相同，我裂开了。 各种封装组件，各种写页面，不过有个好处是以前写的h5拿来改一下标签，基本上还是ok的，就剩下最后几个功能，其中就有一个VR全景功能。 移动端倒是好做，上次做了大概2天就搞定了，原理就是threejs用css3做图片的旋转，具体例子可以参照 https://threejs.org/examples/css3d_panorama.html 不过多描述，下面进入今天的主角：在微信小程序中使用threejs实现VR全景功能。 刚开始想到这个功能，我是拒绝的，这简直就是要了我的头发啊，没办法，谁叫我走上开发这条不归路呢，自己选的路，秃头也要走完。。 那就硬着头皮开始吧，先百度搜了一下在小程序中使用threejs，找到一篇比较干货的文章 https://developers.weixin.qq.com/community/develop/article/doc/00066c4b230b085051592292f5bc13 ，这篇文章作者把threejs给提炼出来了一个小程序版本， 照着他的demo先把canvas给搞出来先。然后再实现全景，怎么实现也是头疼的事情，怎么，我不会写，还不会改吗？ 先看看以前h5的实现方式，采用CSS3DRenderer来实现，问题来了，小程序里面不支持dom的createElement，那咋整嘛

最近在开发小程序，身心疲惫，原因是功能和app相同，我裂开了。 各种封装组件，各种写页面，不过有个好处是以前写的h5拿来改一下标签，基本上还是ok的，就剩下最后几个功能，其中就有一个VR全景功能。 移动端倒是好做，上次做了大概2天就搞定了，原理就是threejs用css3做图片的旋转，具体例子可以参照 https://threejs.org/examples/css3d_panorama.html 不过多描述，下面进入今天的主角：在微信小程序中使用threejs实现VR全景功能。 刚开始想到这个功能，我是拒绝的，这简直就是要了我的头发啊，没办法，谁叫我走上开发这条不归路呢，自己选的路，秃头也要走完。。 那就硬着头皮开始吧，先百度搜了一下在小程序中使用threejs，找到一篇比较干货的文章 https://developers.weixin.qq.com/community/develop/article/doc/00066c4b230b085051592292f5bc13 ，这篇文章作者把threejs给提炼出来了一个小程序版本， 照着他的demo先把canvas给搞出来先。然后再实现全景，怎么实现也是头疼的事情，怎么，我不会写，还不会改吗？ 先看看以前h5的实现方式，采用CSS3DRenderer来实现，问题来了，小程序里面不支持dom的createElement，那咋整嘛

01-Taro打造hello-world应用 一、简介 Taro 是由京东凹凸实验室出品，书写一套代码通过 Taro 的编译工具，将源代码分别编译出可以在不同端（ 微信 / 京东 / 百度 / 支付宝 / 字节跳动 小程序、 快应用 、H5、React-Native 等）运行的代码。废话不多说，先从hello-world开始吧。 二、搭建环境 // node>=8.0.0 npm install -g @tarojs/cli taro -v taro init taroDemo 不好意思我果断control+z <!--more--> cd taroDemo yarn 安装依赖成功后咱先体验一把weapp、alipay、h5的效果 三、小试牛刀 // dev 开发 build 生产 yarn dev:weapp // 微信小程序 yarn dev:alipay // 支付宝小程序 yarn dev:h5 以微信小程序为例 cd taroDemo yarn dev:weapp // 打开微信开发工具 导入dist目录 如果想生成支付宝小程序则control+z 再 yarn dev:alipay, 生成的dist目录就是支付宝小程序了 四、项目结构 五、多端同步调试 在 config/index.js 配置 outputRoot: `dist/${process.env.TARO