Blog
Blog copied to clipboard
yingye
yingye的技术博客
 ## 背景 微信小程序的测试发布在没有 CI/CD 等相关工具的情况下，存在着如下的问题： - 小程序开发助手中，同一个开发者只能显示一个开发版本 - 测试同事找开发要二维码，效率较低 - 本地生成的二维码会出现携带本地代码、未及时拉取分支其他改动等问题 为了避免如上问题的发生，采用**微信小程序集成 Jenkins** 的方案。 ## 基础 在介绍实现方案之前，先来回顾一下常规的微信小程序发布流程。 从上面的流程图可以看出，微信小程序预览、上传都是需要在微信开发者工具中进行的，接下来了解一下微信开发者工具提供的上传方式。 ### 微信开发者工具 除了图形化界面，微信开发者工具还提供了命令行与 HTTP 服务两种接口供外部调用，来进行登录、预览、上传等操作。 #### 命令行调用 命令行工具所在位置： macOS: /Contents/Resources/app.nw/bin/cli Windows:...
# 从 == 和 === 入手，聊聊隐式类型转换 > 面试官：== 和 === 有什么区别？ > 童鞋：=== 要求数据类型相同，== 会进行隐式类型转换... > 面试官：JavaScript:(a==1 && a==2 && a==3)能输出true么？ > 童鞋：??? 下面，我们来一起看看 == 和 === 到底有什么区别，以及上面问题的解法。 ## 数据类型...
[wepy](https://github.com/Tencent/wepy) 是腾讯开源的一款小程序框架，主要通过预编译的手段，让开发者采用类 Vue 风格开发。 让我们一起看看， wepy 是如何实现预编译的。先放上一张官网的流程图，后面的分析可以参考该图。 wepy-cli 主要负责 .wpy 文件的编译，目录结构如下： 编译的入口是 src/compile.js 中的 `compile()` 方法，该方法主要是根据文件类型，执行不同的 compiler ，比如 .wpy 文件会走 compile-wpy.js 下的 `compile()` 方法。 ```js compile(opath) { ... switch(opath.ext) {...
在 Vue SPA 应用中，如果想要修改HTML的头部标签，或许，你会在代码里，直接这么做: ``` // 改下title document.title = 'what?' // 引入一段script let s = document.createElement('script') s.setAttribute('src', './vconsole.js') document.head.appendChild(s) // 修改meta信息，或者给html标签添加属性... // 此处省略一大坨代码... ``` 今天给大家介绍一种更优雅的方式，去管理头部标签 `vue-meta` # vue-meta介绍 >Manage page...
## 构建问题 ### 1. 如何在 head 里面引入js文件? >背景: 在``标签中，以inline的形式引入`flexible.js`文件。本项目主要为移动端项目，引入`flexible.js` 实现移动端适配问题。 Nuxt.js 通过 `vue-meta` 实现头部标签管理，通过查看文档发现，可以按照如下方式配置： ``` // nuxt.config.js head: { script: [ { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'} ] }...
# 一、为什么选择Nuxt.js 多数是基于webpack构建的项目，编译出来的html文件，资源文件都被打包到js中，以下图404页面代码为例。从代码中可以看出，这样的页面是不利于 **搜索引擎优化(SEO, Search Engine Optimization)** ，并且 **内容到达时间(time-to-content)** （或称之为**首屏渲染时长**）也有很大的优化空间。为了解决以上问题，引入了 **Nuxt.js** 框架。 vue官网对于Nuxt.js也是很推荐的，除此之外，Nuxt.js的开发者积极活跃，版本迭代迅速。经过一系列rc版本后，终于在1月9日**发布了 v1.0.0 正式版本**！  图1. 使用webpack构建的HTML（代码已格式化）  图2. 使用 Nuxt.js 构建的HTML（代码已格式化） # 二、Nuxt.js 简介 Nuxt.js 是一个基于...
在分析源码之前，我们先来回顾一下，wepy 的使用： ```js import wepy from 'wepy'; export default class extends wepy.app { ...... } ``` 让我们一起看看 export 出来的 class，是怎么转换成小程序语言的。 在[《深入wepy源码：wpy文件编译过程》](https://github.com/yingye/Blog/issues/3)中，我们介绍了 wepy-cli 是如何编译 wpy 文件的，里面有说到，complie-script.js 在处理 script 代码时，会加入 wepy 初始化的代码。编译之后...
## 前言 在近期的小程序开发中，有一个离线生成二维码的需求。当时想到了一些优秀的前端开源库 [jquery-qrcode](https://github.com/jeromeetienne/jquery-qrcode) 和 [node-qrcode](https://github.com/soldair/node-qrcode)，由于小程序中没有DOM的概念，这些库在小程序中并不适用。 所以，针对微信小程序的特点，封装了 [weapp.qrcode.js](https://github.com/yingye/weapp-qrcode) ，用于在小程序中快速生成二维码。效果如下图：  下面来介绍一下使用方法： ## 使用 ### 创建canvas标签 先在 wxml 文件中，创建绘制的 `canvas`，并定义好 `width`, `height`, `canvasId` 。由于小程序没有动态创建标签的api，所以这一步不能省略。 ```html ``` ### 调用绘制方法 由于微信小程序不支持引入NPM包，可以将dist目录下，weapp.qrcode.min.js 拷贝至项目中。 如果你的小程序使用了支持引入NPM包的框架，如...