微信小程序编程笔录（1）
做微信小程序当中，会遇到好多的工具类util.js，这里记载下来以便平常使用
(Ps:建议通过目录查看)
很快微信开发者平台：
HotApp小程序统计：
微信小程序联盟：
-获取日期（格式化）
链接： 密码：t4vx
-获取动态更新时间
链接： 密码：96le
-二维码生成
二维码生成.js文件，
链接： 密码：er3v
外部去调用的方式：
QR.qrApi.draw(url,canvasId,cavW,cavH);其中QR需要引用此js文件，url是文字信息,canvasId是图片要绘制在canvas标签上，canvasId指的是canvas标签的canvas-id属性，cavW为宽度，canvH为高度。
-html转wxml
链接： 密码：jjwm
链接： 密码：yabo
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：51355次
排名：千里之外
原创：36篇
评论：20条
(1)(3)(1)(2)(10)(1)(1)(1)(1)(2)(4)(4)(2)(3)(9)比如很多人会有这样的问题：
小程序怎样引用第三方js呢？
第三方js是封装好的类库 想引用进来实例化使用
这个帖子就综合一下所有相关的知识，做一个整合，以便大家能够集中了了解；我觉得这个还是应该让大家了解的知识；
提示：小程序不支持window对象和document对象；
一：rpn.js：使用rpn.js实现eval函数功能
二：&&系列文章
使用Underscore.js：
使用Immutable.js：
使用UUID、Base64、Chance：
ES6 对 Promise 有了原生的支持，但微信开发者工具更新版本（0.11.112200）后, 移除了开发者工具对 ES6 中Promise 特性原生的支持, 需要引入第三方的 Promise 库。
Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。
Underscore.js 和 Lodash 是最常用的JavaScript库。
Immutable.js 是 Facebook 开发的不可变数据集合。Immutable
Data（不可变数据）一旦创建就不能被修改。通过使用Immutable
Data，可以更容易的处理缓存、回退、数据变化检测等问题，应用开发更简单。
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
Moment.js是一个JavaScript的日期、时间处理工具类，其对于JavaScript的日期时间处理功能非常强悍和全面。可以用在浏览器环境中使用，也可以在Node.js中。
XRegExp 是一个开源的 JavaScript库，提供一个参数化、可扩展的支持各种浏览器的正则表达式的实现库，支持附加语法、标志以及方法。
x2js是一个 实现 XML 与 JavaScript 对象之间相互转换的工具库。
node-uuid可以快速地生成符合规范 的 UUID。js-base64可以实现Base64编码和解码。crypto-js可以非常方便地在 JavaScript 进行加解密。
Chance是一个 JavaScript 随机数生成工具。Mock.js可以生成随机数据，拦截 Ajax 请求。
三：moment
四：相关讨论
相关讨论一：微信小程序使用第三方库问题？
项目中需要使用base4，克隆了一个下来
因为小程序目前不支持直接引入 node_modules 所以我写的是路径
我在app.js里根据路径写
require('./node_module/js-base64/base64.js');
WAService.js:3&TypeError:
Cannot read property&'Base64'&of&undefined答：@jayzou
因为源码里面并没有exports Base64对象出来，自己手动exports就可以了
目前来说，我也没找到好的方法，只能修改源码强制导出 小程序的运行时环境既不是Node.js也不是浏览器，也没有暴露全局对象。。。
在Base64源码的最开始
global = {}; //在最开始加上这个
var _Base64 = global.Base64;
// that's it!
if (global['Meteor']) {
& &Base64 = global.Base64; // for normal export in Meteor.js
module.exports = global.Base64; //最后加上这个
这样就能用了
import base64 from './node_module/js-base64/base64.js'
相关讨论二：如何引入第三方插件（网上的方法已经试过）引入第三方插件，网上有人说需要进行UMD打包，打包之后引入还是不行。有的说需要暴露接口，对插件代码进行改造，加入了module.exports
= function,然后通过require引入，但是引入后还是报错。
个人引用的是strophe.js文件，求大神告知解决办法
去看了一下Strophe的源码。不知道你用的什么版本的。我看源码最后是这样的
function (Strophe, build, msg, iq, pres) {
& & window.Strophe = S
& & window.$build =
& & window.$msg =
& & window.$iq =
& & window.$pres =
小程序中宿主环境不是浏览器，所以没有window。这样写当然是不行的。你可以尝试修改为
function (Strophe, build, msg, iq, pres) {
& & var global = {}
& & global.Strophe = S
& & global.$build =
& & global.$msg =
& & global.$iq =
& & global.$pres =
& & module.exports = global
使用的时候：
var Strophe = require('./pathStrophe.js').Strophe
注：小程序和web编程是有区别的。我看了一下这个库的源码，使用了很多document, xhr之类的，这些是不支持的哦。可以查阅官方文档。
相关讨论三：小程序模块化只支持exports和module.exports吗？
require(&test.js&);
a();//可以直接使用
小程序报错
WAService.js:1 thirdScriptError setMaxDat &pages/index/index&&
page onRequest function ReferenceError: a is not defined
function a(){
function b(){
目前是在微信小程序使用第三方的test.js，在之前的H5项目是可以使用test.js的？目前就是不想去用exports和module.exports改变test.js。
需要加上从当前页面到该文件的完整路由 如：../../common/test.js -----当前页面位置的前一个前一个文件夹的common文件夹的test.js 文件
var test = require(&test.js&);
test.js&&中
module.exports = {a:a}
相关讨论四：问题：小程序如何导入第三方的JS工具库
怎样导入一个第三方的JS工具库
使用require函数
var util = require('../../utils/util.js')
简易教程：
引用其他js里的方法：
相关文章：
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：14263次
排名：千里之外
原创：11篇
(1)(2)(2)(2)(1)(5)(2)9019人阅读
「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只发放了 200 个内测资格（泪流满面）。本以为没有 AppID 这个月就与小程序无缘了，庆幸的是微信这两天发布了正式版开发者工具，无需内测邀请也可以尝鲜了。
因此也就有了我与「小程序」的初体验，而我的感受只有一个字——爽！
在知名同性交友网站 Github 上，「小程序」的 Demo 不少，但是大多只是简单的 API 演示，有的甚至直接把页面数据写在了 json 文件里（分明有网络请求 API）。我想体验的是能够将服务端和小程序端无缝连接起来（体验够爽）的项目。最终，我选择了腾讯云官方推出的。
「小相册」主要实现了以下功能：
列出对象存储 COS 中的图片列表。
点击左上角上传图片图标，可以调用相机拍照或从手机相册选择图片，并将选中的图片上传到 对象存储 COS 中。
轻按任意图片，可进入全屏图片预览模式，并可左右滑动切换预览图片。
长按任意图片，可将其保存到本地，或从 对象存储 COS 中删除。
效果演示图（受开发工具的限制，部分功能尚未实现）
（Cloud Object Service）是腾讯云推出的面向企业和个人开发者提供的高可用，高稳定，强安全的云端存储服务。可以将任意数量和形式的非结构化数据放入COS，并在其中实现数据的管理和处理。
之所以选择腾讯云的 Demo，一是因为它是腾讯自家推出的，项目的质量有保障；二是因为它是少有的既讲小程序开发，又介绍云端部署的项目。
稍微有点经验的程序员都知道，架构要动静分离，静态文件最好不要放在自己的服务器上，要放在专门用来存储的对象存储服务器COS上，并且用CDN 加速。「小相册」后端采用的是 Node.js，Nginx作为反向代理。
首先，我们需要在本地搭建好微信「小程序」的开发环境。即下载开发者工具。微信官方已经推出了正式版 IDE，大家没有必要再去下载破解版了。打开，根据自己的操作系统选择。我使用的是
安装好之后打开运行，会要求微信扫码登陆。之后，就可以看到创建项目的页面了。
选择添加项目，没有 AppID 就选无（如果乱写会报错，到时可能无法进入项目）。如果你选择的项目目录为空，请如图所示勾选在“当前目录中创建quick start项目”。
点击“添加项目”之后，我们会进入开发工具的调试页面。
接下来，我们下载「小相册」的源码。可以选择直接从下载，也可以从腾讯云团队的 Github
仓库拉取。我推荐从 Github 仓库拉取，这样可以及时获取最新的代码。
git clone /CFETeam/weapp-demo-album.git
最终，我们会得到类似这样的文件目录。
简单解释下目录结构：
applet（或app）: 「小相册」应用包代码，可直接在微信开发者工具中作为项目打开。
server: 搭建的Node服务端代码，作为服务器和app通信，提供 CGI 接口示例，用于拉取图片资源、上传图片、删除图片。
assets：「小相册」的演示截图。
源码下载完成之后，我们打开微信 web 开发者工具，新建项目「小相册」，选择目录applet（或app）。
在进行部署之前，我们来简单分析一下「小相册」的具体代码。毕竟只看效果不是我们的目的，我们的目的是以「小相册」为例，了解如何开发小程序并与服务端进行交互。
「小相册」包含一个描述整体程序的 app 和多个描述各自页面的 page。主程序 app 主要由三个文件组成，分别是&app.js（小程序逻辑）、app.json（小程序公共设置）和&app.wxss（小程序公共样式表），其中前两个为必备文件。config.js&文件中包含了一些部署域名的设置，现在不用管。
在 pages 目录下，有两个 page 页面，分别是 index 和 album。页面结构算是比较简单的，其中 index 是小程序启动时默认进入的页面。每个页面下，至少要有 .js（页面逻辑）和 .wxml（页面结构）两个文件，.wxss（页面样式表）和 .json（页面配置）文件为选填。你可能注意到了，这些文件的文件名与父目录的名称相同。这是微信官方的规定，目的是减少配置项，方便开发者。
接下来我们以 index 页面为例做简单的解释。index.wxml&是这个页面的表现层文件，其中的代码非常简单，可以分为上下两大部分。
class=&page-top&&
class=&username&&恭喜你&
class=&text-info&&成功地搭建了一个微信小程序&
class=&page-btn-wrap&&
class=&page-btn& bindtap=&gotoAlbum&&进入相册&
class=&page-bottom&&
class=&qr-txt&&分享二维码邀请好友结伴一起写小程序！&
src=&../../images/qr.png& class=&qr-img&&&
src=&../../images/logo.png& class=&page-logo&&&
页面的演示效果如下：
我们看到，页面上有一个“进入相册”的按钮。正常理解，点击后该按钮后我们就可以进入相册了（这不废话嘛）。那小程序背后是怎样实现该操作的呢？
在&index.wxml&中，我们发现对应的 button 标签上定义了一个&bindtap&属性，绑定了一个叫做&gotoAlbum&的方法。而这个方法可以在&index.js&文件中找到。事实上，文件中也只定义了这一个方法，执行的具体动作就是跳转到
album 页面。
gotoAlbum() {
wx.navigateTo({ url: '../album/album' });
album.js&页面中编写了程序的主要逻辑，包括选择或拍摄图片、图片预览、图片下载和图片删除；album.wxml 中三种视图容器 view、scroll-view、swiper均有使用，还提供了消息提示框
toast。具体方法和视图的实现请查看。所有的这些功能都写在 Page 类中。
lib 目录下提供了小程序会用的一些辅助函数，包括异步访问和对象存储 COS 的 API。
总的来说，和微信官方宣传的一样，在开发者工具下进行小程序的开发，效率确实提高了很多，而且有很多微信提高的组件和 API。所以，在开发速度这点上的体验还是非常爽的。
另外，由于「小相册」需要使用诸多云端能力，如图片的上传和下载，我们还需要进行服务器端的部署和设置。具体请看接下来的步骤。
虽然服务端的开发不是本文的重点，但是为了全面地体验「小相册」的整个开发部署流程，我们还是有必要了解服务端的部署，这里我们使用的是腾讯云。
如果你想更爽一点，那么可以选择腾讯云官方提供的小程序云端镜像。「小相册」的服务器运行代码和配置已经打包成腾讯云 CVM 镜像，可以。可谓是一键部署好云端。
如果你以前没有使用过腾讯云，可以选择免费试用（我已经领取了 8 天的个人版服务器），或者以优惠的价格购买所需的服务。
你也可以选择将「小相册」源码中的server文件夹上传到自己的服务器。
如果你已经有腾讯云的服务器和域名，并配置好了 https，那么可以跳过第 4-6 步。
在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。简单来说，就是你的域名必须走 https 协议。所以你还需要为你的域名。如果没有域名，。由于我们没有收到内测，也就暂时不用登录微信公众平台配置通信域名了。
微信小程序云端示例镜像中，已经部署好了 Nginx，但是还需要在&/etc/nginx/conf.d&下修改配置中的域名、证书、私钥。
请将红框部分换成自己的域名和证书，并且将&proxy_pass&设置为 Node.js 监听的端口，我的是 9993。
配置完成后，重新加载配置文件并且重启 Nginx。
sudo service nginx reload
sudo service nginx restart
我们还需要添加域名记录，将域名解析到我们的云服务器上，这样才可以使用域名进行 https 服务。在腾讯云注册的域名，可以直接使用来添加主机记录，直接选择上面购买的
解析生效后，我们的域名就支持 https 访问了。
由于我们希望实现动静分离的架构，所以选择把「小相册」的图片资源是存储在 COS 上的。要使用 COS 服务，需要登录&，然后在其中完成以下操作。
点击创建 Bucket。会要求选择所属项目，填写相应名称。这里，我们只需要填上自己喜欢的 Bucket 名称即可。
然后在 Bucket 列表中，点击刚刚创建的 Bucket。然后在新页面点击“获取API密钥”。
弹出的页面中包括了我们所需要的三个信息：唯一的 APP ID，一对SecretID和SecretKey（用于调用 COS API）。保管好这些信息，我们在稍后会用到。
最后，在新的 Bucket 容器中创建文件夹，命名为photos。这点后面我们也会提到。
在官方提供的镜像中，小相册示例的 Node 服务代码已部署在目录&/data/release/qcloud-applet-album&下。进入该目录，如果是你自己的服务器，请进入相应的文件夹。
cd /data/release/qcloud-applet-album
在该目录下，有一个名为&config.js&的配置文件（如下所示），按注释修改对应的 COS 配置：
module.exports = {
port: '9993',
ROUTE_BASE_PATH: '/applet',
cosAppId: '填写开通 COS 时分配的 APP ID',
cosSecretId: '填写密钥 SecretID',
cosSecretKey: '填写密钥 SecretKey',
cosFileBucket: '填写创建的公有读私有写的bucket名称',
另外，cd ./routes/album/handlers，修改&list.js，将&const
listPath&的值修改为你的Bucket 下的图片存储路径。如果是根目录，则修改为&'/'。当前服务端的代码中将该值设置为了&'/photos'&，如果你在第七步中没有创建该目录，则无法调试成功。
小相册示例使用 pm2 管理 Node 进程，执行以下命令启动 node 服务：
pm2&start&process.json
接下来，在微信 web 开发者工具打开「小相册」项目，并把源文件config.js中的通讯域名 host 修改成你自己申请的域名。
将蓝色框内的内容修改为自己的域名
然后点击调试，即可打开小相册Demo开始体验。
最后提示一点，截止目前为止，微信小程序提供的上传和下载 API 无法在调试工具中正常工作，需要用手机微信扫码预览体验。但是由于没有内测资格，我们暂时是没办法体验了。
嗯，就这点不够爽，没有内测邀请。
转：/a/3827?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：9683次
排名：千里之外& 写个微信小程序项目练练手
写个微信小程序项目练练手
　　学会一项开发技能最快的步骤就是：准备，开火，瞄准。最慢的就是：准备，瞄准，瞄准，瞄准&&　　因为微信小程序比较简单，直接开撸就行，千万别瞄准。　　地址：　　功能介绍　　功能比较简单，调用了即时查询空气质量。　　我计划多加一些功能，争取把微信小程序提供的功能全用一遍。　　也许你可以学到的东西　　1）的优先级 代码见: /pages/air_quality/result.wxss　　2）页面跳转,数据的传递 /pages/air_quality/air_quality.js ../result.js common/utils.js　　3）网络请求 /pages/air_quality/air_quality.js　　4）样式统一 程序的配置 参考 app.wxss app.json　　5）modal显示和隐藏 /pages/air_quality/air_quality.wxml ../air_quality.js　　6）状态机 事件绑定等等　　css优先级　　微信样式文件，其实就是css样式做了个加减法，就变成了wxss文件。　　其中增加了一个单位 rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。不是绝对像素，类似Android中的dp单位。参考　　除去上面的，剩下的wxss和css大部分还是一样的，包括样式选择的优先级。　　原则一： 继承不如指定　　原则二： #id & .class & 标签选择符　　原则三：越具体越强大　　原则四：标签#id &# 标签.class & .class　　CSS优先级权重计算法　　CSS优先级包含四个级别（标签内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数!　　根据这四个级别出现的次数计算得到CSS的优先级。　　CSS优先级的计算规则如下：　　* 元素标签中定义的样式（Style属性）,加1,0,0,0　　* 每个ID选择符(如 #id),加0,1,0,0　　* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0　　* 每个元素选择符（如p）或伪元素选择符(如 :firstchild)等，加0,0,0,1　　然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，　　然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。　　啰嗦了这么多 ,不如直接看例子，项目中result.wxml文件中布局:
&class=&page&&&
&&&&&class=&container&&style=&align-items:&center&&&
&&&&&&&&&&&
&&&&&&&&&class=&text_area&&&
&&&&&&&&&&&
&&&&&&&&&&&&查询城市:&{{city}}&&
&&&&&&&&&&
&&&&&&&&&&&&&
&&&&&&&&&&
&&　　其中class=&page&中的page定义样式有:
.page&{&&&&
&&&&...&&&&
&&&&font-size:&32&&&&
}　　Text标签也指定了font-size样式
text&{&&&&
&&&&font-size:&34&&&&&
}　　当前位置由于 class page中指定了font-size,Text标签也制定了该属性， 虽然标签优先级不如class高, 但是原则一:继承不如指定，所以34rpx生效。　　页面的跳转　　再小的程序，一个界面也不太够用，跳转界面还是必须的。　　微信提供了，当用户按下该组件时跳转，这属于静态跳转，类似网页中的a标签;　　也可以在触发某些事件时，通过 跳转界面，这种做法比较灵活。
wx.navigateTo(&{&&&&
&&&&&&url:util.createURL(&&./result&,&res.data.retData),&&
});&&　　路径后面可以通过? 拼装要传递的数据, 类似网络中get请求拼装url一样。　　上面createURL就是我写的一个工具方法 ，在项目的common/utils.js文件中。
function&createURL(&url,&obj&)&{&&
&&let&props&=&&&;&&
&&let&resultURL=&&;&&&&
&&for(let&p&in&obj){&&&&
&&&&if(obj[p])&&
&&&&props+=&&&&+p&+&&=&&+&obj[p];&&&&
&&resultURL=url+&?&+props.substr(1);&&
&&console.log(resultURL);&&
&&return&resultURL;&&&&
module.exports&=&{&&
&&createURL:&createURL&&
}&&　　网络请求　　具体写法可以参考　　下面是我的代码:
wx.request(&{&&
&&url:&Constant.AIR_QUALITY_URL,&&
&&header:&{&&
&&&&&Content-Type&:&&application/json&,&&
&&&&&apikey&:&Constant.API_KEY&&
&&data:&{&&
&&&&&city&:&this.data.inputValue&&
&&success:&function(&res&)&{&&
&&&&console.log(&res.data&);&&
&&&&if(&res.data.errNum&===&0&)&{&&&
&&&&&&wx.navigateTo(&{&&&&
&&&&&&&&url:util.createURL(&&./result&,&res.data.retData),&&
&&&&&&});&&
&&&&}else{&&
&&&&&&that.setData(&{&&&
&&&&&&&&modalHidden:&false,&&
&&&&&&&&modalErrorText:res.data.retMsg&&
&&&&&&});&&
&&fail:&function()&{&&
&&&&that.setData(&{&&&
&&&&&&modalHidden:&false,&&
&&&&&&&modalErrorText:&请求失败,请检测网络&&&
&&complete:&function()&{&&
&&&&that.setData(&{&&
&&&&&&loading:&false&&
});&&　　页面统一样式　　微信小程序的api不是很多，比较容易上手， 但是写出来一个好的程序还是需要仔细研究的，建议大家看一下微信提供的　　好看的程序不一定好用，但是好用的程序一定好看。哪怕是个充气的，你也肯定选好看的那个。　　为了每个界面样式统一，大家可以把相关样式抽取到app.wxss文件中，这个文件的样式其它所以界面都可以直接使用。　　下面是项目里的app.wxss,因为涉及的页面较少，用到的样式不多，目前就下面几个：
&&background-color:&#fbf9fe;&&&
&&height:&100%;&&
.container&{&&
&&min-height:&100%;&&
&&display:&&&
&&flex-direction:&&&
&&justify-content:&space-&&
&&padding:&200rpx&0&&
&&&&min-height:&100%;&&
&&&&flex:&1;&&
&&&&background-color:&#FBF9FE;&&
&&&&font-size:&32&&
&&&&font-family:&-apple-system-font,Helvetica&Neue,Helvetica,sans-serif;&&
&&&&overflow:&hidden;&&
.page&input{&&
&&&&padding:&20rpx&30&&
&&&&background-color:&#fff;&&
.section{&&
&&&&margin-bottom:&80&&
.section__title{&&
&&&&margin-bottom:&16&&
&&&&padding-left:&30&&
&&&&padding-right:&30&&
.btn-area{&&
&&&&padding:&0&30&&
.btn-area&button{&&
&&&&margin-top:&20&&
&&&&margin-bottom:&20&&
}&&　　状态机　　微信框架刷新界面的方式类似React Native的状态机。　　微信每个页面都可以设置data数据。如我的项目中的：
&&data:&{&&&&
&&&&inputValue:&&&,&&&
&&&&loading:&false,&&&
&&&&disabled:&true,&&&
&&&&modalHidden:&true,&&&
&&&&modalErrorText:&请求失败,请检测网络&&&
}&&　　data里的数据一般用来控制界面的变化。　　data里的数据不要随便乱写, 只设置和界面相关的。因为里面的数据一旦发生变化就会刷新界面，无关的数据只会加重渲染的压力。　　data里面的数据，可以在wxml文件中通过 {{js数据}}格式绑定。　　最后强调, 只能使用setData函数改变状态机变量　　最后吐槽　　世界上只有两种程序，一种是天天挨骂的，另一种是没人用的。　　微信小程序的开发环境非常难用，简直在侮辱开发环境这个词。连个自动闭合标签都没有，好多提示都没有（没提示谁会写代码啊），用中文输入法就会发现好的问题，想写中文注释需要时刻保持shift键切换，千万别忘了。　　如果不想用它，也没问题， 用webStorm也可以写， 但是目前调试还是在微信开发环境中好用点。　　webStorm需要配置 *.wxss和 *.wxml 的文件类型。 wxss对应css , wxml对应xml或者转自CSDN于连林520wcf的专栏
除非特别注明，文章均为原创
转载请标明本文地址：
作者:鸡啄米
&&( 10:27:2)&&( 11:0:6)&&( 9:34:16)&&( 9:24:41)&&( 10:37:50)&&( 9:52:46)&&( 10:54:19)&&( 16:40:44)&&( 21:46:29)
完全随机文章