微信小程序开发文档

前言 今天来聊一下前端必备技能—— 小程序开发 。 从最早发布的 微信小程序 ，到后来的 支付宝小程序 、 字节跳动小程序 、 百度小程序 、 QQ小程序 ，还有最近发布的 360小程序 ，面对这么多套的代码，开发者该如何开发呢？ 当业务要求同时在不同的端都要展现时候，针对不同的端去编写多套代码的成本显然非常高。 这时候只需编写一套代码，就能够适配多端的能力就显得尤为需要。 今天就来给大家介绍一款，使用 Vue 的跨端框架—— uni-app uni-app 框架简介 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，可编译到 iOS 、 Android 、 H5 、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等平台。 uni-app 在 开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本 等 6 大关键指标上拥有极强的竞争优势： 开发者/案例数量更多 跨端抹平度/扩展灵活性(通过条件编译，调用专有能力而不影响其他平台) 性能体验更优秀( App 端支持 weex 渲染，带来更流畅的用户体验。) 周边生态丰富(推出 插件市场 ，能够提供较多的组件和模板，真正做到开箱即用) 学习成本低(采用 Vue.js 语法 + 小程序 API ) 开发成本低(不止开发成本，招聘、管理、测试各方面成本都大幅下降。)

BeesFrontEnd 随着ReactNative、Weex与Flutter等跨端框架的发展，大前端的概念也逐渐普及开来，纯粹的Native开发相对变得比较少，前端也成为了客户端同学必须要掌握的一门技术，但是客户端同学做的是跨端开发，在学习路线上和前端同学又稍有不同，下面从客户端同学的视角去讨论如何学习前端知识。 这里为大家整理了一份跨端技术图谱，这份图谱并没有去穷尽所有的前端技术，只是从客户端开发的视角去梳理常用的技术点，帮助大家理清脉络。 更多关于跨端技术的讨论可以参见 BeesFrontEnd 项目。 开发工具 IDE推荐 VSCode ，轻量级、插件丰富，常用插件如下所示： Terminal：命令行工具。 Git History：查看单行提交记录和文件提交记录。 Git Project Manager：Git项目管理工具。 Git Len：解决日常开发协作痛点，推荐安装。 vscode-icons：让你的文件都带上好看的图标。 Path Intellisense：文件路径自动补全。 Auto Close Tag：自动闭合HTML标签。 Baracket Pair Colorizer：成对括号分颜色显示，方便区分。 Settings Sync：同步你的配置和扩展，参见同步教程。 VS Color Picker：取色器。 ES7 React/Redux/GraphQL

详细 一、前言 相信大家在开发小程序时会遇到某个功能多次使用的情况，比如弹出框。这个时候大家首先想到的是组件化开发，就是把弹出框封装成一个组件，然后哪里使用哪里就调用，对，看来大家都是有思路的人，但是要怎样实现呢。可能你会去看官方文档，但是微信的官方文档也是说的不太清楚，所以写起来也是非常痛苦。今天就带大家手摸手开发微信组件，坐稳了，马路杀手要开车了。 二、具体实现 我们先实现个简单的弹窗组件，详情图如下： 实现过程如下： 1.新建component文件夹存放我们的组件，里边存放的就是我们所用的组件，我们今天要做的事弹出框，新建文件夹popup存放我们的组件模板，点击右键选择新建component，就会自动生成组件的模板wxss、wxml、json、js，如图 2.我们可以写一些组件样式和布局，更页面写法类似，我就不多说了，直接把代码贴出 : popup.wxml <view class="wx-popup" hidden="{{flag}}"> <view class='popup-container'> <view class="wx-popup-title">{{title}}</view> <view class="wx-popup-con">{{content}}</view> <view class="wx-popup-btn"> <text class="btn-no

小程序的页面跳转 <button bindtap="gotoComment" data-movieid="{{item.id}}" class="movie-comment">评价</button> .movie-comment{ height: 60rpx; background: #e54847; color: #fff; font-size: 26rpx; margin-top: 120rpx; } 添加评价按钮，跳转到详情 添加gotoComment方法 gotoComment:function(event){ wx.navigateTo({ url: `../comment/comment?movieid=${event.target.dataset.movieid}` }); } event.target.dataset获取到交互的变量，wx.navigateTo的使用说明见微信开发文档 https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html 跳转后如何获取到参数？ 在跳转后的新页面里 /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(options);/

一、默认初次加载卡顿情况明显 解决方案： 微信小程序使用video组件播放视频的时候，会出现卡顿或者无法播放的问题，加一个custom-cache=”{{false}}“即可解决，这个属性文档上没有，是从小程序开发社区中get到的。 <video src="{{url}}" id="videoOne" custom-cache="{{false}}"> </video> 二、视频卡顿，还有一种情况就是视频内容画面分辨率太大。 解决方案：使用视频压缩工具，处理视频内容，建议720P就可以了。 更多： 微信小程序文本如何换行 微信小程序文件系统整理（一） ios系统中openDocument API调用成功但是打开文件无反应/空白 来源： https://my.oschina.net/tianma3798/blog/3101903

引言 最近公司需要做一个小程序的项目，正好发现了wepy这么一个跟vue的开发方式类似的框架，不过说起来跟vue类似，但是用起来还真不是那么简单。当然还是先给出官方文档链接，方便查阅，有些细节还真的是在那只言片语间了。 微信小程序开发文档中有个 搜索按钮 ，不过不要相信它是万能的，很多东西就是搜索不到的，比如arrayBufferToBase64这样的api，所以在使用某个功能的时候，尽可能找到该功能对应的组件、API 官方文档 小程序的官方文档 wepy官方文档 下面是已经踩过的 坑 标签中的指令简写 跟Vue类似 对于动态赋值的属性可以使用 :attr="value" 的方式 对于绑定事件可以使用@click="fn"的方式 data使用注意点 对于视图中需要用到的数据，应该事先在data中定义一下，哪怕此时没有数据，也应该定义一个空值 WePY中的methods的使用 只能声明页面的bind、catch事件，不能声明自定义方法 自定义方法应该跟methods平级 页面跳转 navigateTo() 和 redirectTo() 不允许跳转到 tabbar 页面， 只能用 switchTab() 跳转到 tabbar 页面 文件上传 上传文件没有传统html中的文件域( <input type="file"/> )，要想上传文件只能使用API： uploadFile()

视图层：Pages主要有 wxml页面文件和模板文件、wxs脚本文件、wxss样式文件；component是抽取出来的业务单元，同样拥有wxml页面文件和模板文件、wxs脚本文件、wxss样式文件。 WXML(WeiXin Markup language) 用于描述页面的结构。 WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML ，可以构建出页面的结构。 WXSS(WeiXin Style Sheet) 用于描述页面的样式。 组件(Component)是视图的基本组成单元。 一：WXML：WXML（WeiXin Markup Language）是一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。 MVVM模式： 在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候， JS 会记录一些状态变化到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化 。 当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式。 MVVM 的开发模式把渲染和逻辑分离： 不让 JS 直接操控 DOM ，JS只需要管理状态(数据)变化即可；然后再通过一种 模板语法

原文: http://blog.gqylpy.com/gqy/438 置顶：来自一名75后老程序员的武林秘籍——必读 （博主推荐） 来，先呈上武林秘籍链接： http://blog.gqylpy.com/gqy/401/ 你好，我是一名极客！一个 75 后的老工程师！ 我将花两分钟，表述清楚我让你读这段文字的目的！ 如果你看过武侠小说，你可以把这个经历理解为，你失足落入一个山洞遇到了一位垂暮的老者！而这位老者打算传你一套武功秘籍！ 没错，我就是这个老者！ 干研发 20 多年了！我也年轻过，奋斗过！我会画原理图，会画 PCB，会模拟，会数字！玩过 PLC，玩过单片机，会用汇编，会用 C！玩过 ARM，比如 PLC，STM32，和时下正在起飞的 NXP RT1052！搞过 DSP，比如 TMS320F28335！搞过 FPGA，不管 Xilinx 还是 Altera，也不管是 Verilog 还是 VHDL，或者直接画数字电路图！我懂嵌入式系统，比如 uCOS 和 Linux！我懂开源的硬件，比如 Arduino 和树莓派!我也搞软件，学了一堆上位机的语言C#，JAVA，Python，Kotlin，Swift！会写爬虫工具，又自学写APP，不管Android 还是 IOS！ 可是这一切有什么用呢？土鸡瓦狗！不值一提！干技术的永远就是最苦逼的那个人！ 我相信看到这里的你，应该是个 IT

本文原文由作者“司徒正美”发布于公众号“前端你别闹”，即时通讯网收录时有改动，感谢原作者的分享。 1、引言 1990 年，第一个Web浏览器的诞生；1991 年，WWW诞生，这标志着前端技术的开始。 在这将近20年的前端发展史中，我们经历了从最早的纯静态页面，到JavaScript跨时代的诞生；从PC端到移动端；从依赖后端到前端可自由打包开发；从早期的网景Navigator浏览器到现在各家浏览器百花齐放…… 我们经历了前端的洪荒时代、 Prototype 时代、jQuery时代 、后jQuery时期、三大框架割据时代，这其中均是由国外开发者主导，直到如今的小程序时代，才是中国开发者独创的。 这是漫长的技术储备下的成果，最终促成了良好的技术成长收获。期间的前端发展之路，崎岖艰难。 （本文同步发布于： http://www.52im.net/thread-2719-1-1.html ） 2、相关文章 《 小程序技术始于微信？来看看移动端小程序技术的前世今生！ 》 《 盘点主流移动端跨平台UI技术：实现原理、技术优劣、横向对比等 》 《 最火移动端跨平台方案盘点：React Native、weex、Flutter 》 《 快速了解Electron：新一代基于Web的跨平台桌面技术 》 3、洪荒时代（1990~1994年） 在1990~1994年期间，前端界发生的大事有：WWW（World

需求分析二 1.1编制目的 希望通过此文档来初步介绍这一微信小程序，并借此使得用户能够更加了解其大概功能和使用方法。 1.2适用范围 此文档只适用于基于微信小程序的食堂订餐送餐等功能的介绍与使用。适用于使用本程序的食堂工作人员和点餐的学生等。 1.3前提与约束 这项软件开发的时长为一个月，无具体经费限制。要求是使用Java、软件工程及数据库访问技术等知识进行开发。 系统概述 2.1用户特点 此小程序的用户类型主要分为两类，主要是食堂工作人员和学生。面对学生大数量的点餐送餐，软件需要及时更新发布数据，对于数据的快速响应和准确性有很大的要求。 2.2运行环境 手机客户端（安卓、iOS都行），使用者通过微信进入小程序页面进行操作，需要用户开通地理位置的权限等。 2.3设计和执行约束 软件使用可以在微信小程序中找到并使用，且必须符合微信小程序使用的相关规定，必须配备身份认证系统等。 外部需求接口 3.1用户界面 用户进入需要登录并且进行身份认证，需要配备其他帮助选项或者错误信息显示等。 3.2软件接口 由微信小程序提供各种软件接口，如数据库、操作系统等应用程序编程接口。 3.3通信接口 与本程序所使用的的通信功能相关的如电子邮件、Web浏览器、网络通信标准或协议等。 功能需求 4.1用户分类 一类为食堂的工作人员