本文目录一览：

• 1、微信小程序 怎么用第三方js库 jquery
• 2、微信小程序，weixin，小程序怎么引入js闭包
• 3、微信小程序wxml中使用js函数
• 4、微信小程序（上）
• 5、重磅：微信小程序发布WeUI.js 官方视觉组件库！

微信小程序 怎么用第三方js库 jquery

方法一：rpn.js：使用rpn.js实现eval函数功能

操作链接：网页链接

方法二：

（1）使用Underscore.js：操作链接：网页链接

（2）使用Immutable.js：操作链接：网页链接

（3）使用UUID、Base64、Chance：操作链接：网页链接

扩展微信小程序框架功能（1）——Promise

ES6 对 Promise 有了原生的支持，但微信开发者工具更新版本（0.11.112200）后, 移除了开发者工具对 ES6 中Promise 特性原生的支持, 需要引入第三方的 Promise 库。

扩展微信小程序框架功能（2）——Generator

Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

扩展微信小程序框架功能（3）——函数功能增强

Underscore.js 和 Lodash 是最常用的JavaScript库。

扩展微信小程序框架功能（4）——Immutable.js

Immutable.js 是 Facebook 开发的不可变数据集合。Immutable

Data（不可变数据）一旦创建就不能被修改。通过使用Immutable

Data，可以更容易的处理缓存、回退、数据变化检测等问题，应用开发更简单。

扩展微信小程序框架功能（5）——Redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

扩展微信小程序框架功能（6）—日期时间

Moment.js是一个JavaScript的日期、时间处理工具类，其对于JavaScript的日期时间处理功能非常强悍和全面。可以用在浏览器环境中使用，也可以在Node.js中。

扩展微信小程序框架功能（7）——正则表达式

XRegExp 是一个开源的 JavaScript库，提供一个参数化、可扩展的支持各种浏览器的正则表达式的实现库，支持附加语法、标志以及方法。

扩展微信小程序框架功能（8）——Xml处理

x2js是一个 实现 XML 与 JavaScript 对象之间相互转换的工具库。

扩展微信小程序框架功能（9）——加解密

node-uuid可以快速地生成符合规范 的 UUID。js-base64可以实现Base64编码和解码。crypto-js可以非常方便地在 JavaScript 进行加解密。

扩展微信小程序框架功能（10）——测试辅助

Chance是一个 JavaScript 随机数生成工具。Mock.js可以生成随机数据，拦截 Ajax 请求。

方法三：moment

操作链接：网页链接

微信小程序，weixin，小程序怎么引入js闭包

一个小程序页面由四个文件组成，分别是：js

页面逻辑 、wxml

页面结构 、wxss

页面样式表 、json

页面配置 。把样式宝贝到当前页面同名的.wxss文件里面就可以了！

微信小程序wxml中使用js函数

上边这种写法不生效，在小程序中不支持这种语法。

需要创建一个wxs文件，

在wxml文件中引入该文件，并调用你想要用到的函数

微信小程序（上）

注册开发者账号：

安装小程序开发工具：

创建项目

pages目录：用于存放所有的页面。

utils目录：用于存放工具类文件。

app.js：是入口文件，程序在运行时，首先要执行该文件。

app.json：是全局配置文件，用于配置小程序的信息（它里面配置的是全局信息）。

app.wxss：是全局样式文件。全局样式文件里面定义的选择器，在所有的页面中生效。

project.config.json：是项目配置文件。

sitemap.json：是SEO配置文件，方便用户搜索到该小程序。

（1）pages配置项

pages里面注册的是视图。用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息

（2）window配置项

window 是全局窗口配置。

backgroundTextStyle 设置文本样式（下拉loading的样式），仅支持 dark / light。

navigationBarBackgroundColor 设置导航栏背景。

navigationBarTitleText 设置导航栏文本。

navigationBarTextStyle 设置导航栏标题颜色，仅支持 black / white。

（3）style

style 设置样式级别，默认是v2。

（4）sitemapLocation

sitemapLocation 指明sitemap.json 的位置；默认为 'sitemap.json' 即在 app.json 同级目录下名字的 sitemap.json 文件。

每一个页面由四个文件组成：xxx.wxml文件、xxx.wxss文件、 xxx.js文件和xxx.json文件。

（1）xxx.wxml文件

xxx.wxml文件，就相当于一个html文件。在wxml文件中，不能写传统的html标签，只能写微信提供的组件。

① view组件

相当于div标签。

② text组件

相当于span标签。

③ swiper

swiper是滑块视图容器，它里面只能放swiper-item组件。

swiper组件的常用属性：

circular是衔接滑动

autoplay是自动切换

interval是自动切换时间间隔

indicator-dots是否显示面板指示点

indicator-color指示点颜色

indicator-active-color当前选中的指示点颜色

④ image

image是图片组件，最好全部采用网络图片，因为小程序的总体积不允许超过2MB。

（2）xxx.wxss文件

xxx.wxss文件，就相当于一个css文件。在wxss文件中，最好不要写标签选择器和id选择器，统一写类选择器。

为了让小程序里面的内容在各种设备上能够自适应显示，微信推出了响应式单位：rpx。在iphone6中，2rpx=1px。

（3）xxx.js文件

xxx.js文件，是交互文件（核心文件）。

Page()函数，返回页面对象，该函数需要传一个配置参数，这个配置参数是一个对象。在这个配置对象中，定义当前页面的所有内容。

① data

定义页面的数据。

② 自定义函数

开发者可以添加任意的函数或数据到Object 参数中，在页面的函数中用this可以访问。

（4）xxx.json文件

xxx.json文件，是页面的配置文件（它里面配置的是当前页面信息）。

WXML 中的动态数据均来自对应 Page 的 data。

（1）获取data中数据

通过插值表达式{{}}，可以显示js里面定义的data里面的数据。

（2）组件属性(需要在双引号之内)

（3）运算

可以在{{}} 内进行简单的运算。

① 三元运算

② 逻辑判断

bindtap是触屏事件，其实就是相当于网页中的点击事件。

小程序中bindtap绑定方法时不能传参数。所以组件通过data-xxx传递数据。

注意： 自定义属性的命名用驼峰或者大写命名，小程序内部会自动转成小写。

8、setData()方法

setData()方法，更新页面中数据。页面数据更新后，调用setData()方法重新渲染到页面。

wx:for指令用于循环数组数据，生成组件。

循环出来的每一项通过item返回，每一项对应的索引，通过index返回。

wx:key=""，设置每一项唯一的标识。循环列表时，添加wx:key的好处是，将来列表发生变化时重新渲染列表的损耗为更低。

条件渲染可以使用wx:if或hidden。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

wx:if用于条件渲染：条件为真生成里面的内容，条件为假不会生成里面的内容。（每次重新生成内容）

也可以用wx:elif 和 wx:else 来添加一个 else 块。

hidden用于条件渲染：条件为真隐藏里面的内容，条件为假显示里面的内容。（每次切换样式）

在app.json文件中添加tabBar节点。tabBar是小程序客户端底部或顶部tab栏的实现。

color：tab上的文字默认颜色，仅支持十六进制颜色。

selectedColor：tab上的文字选中时的颜色，仅支持十六进制颜色。

backgroundColor：tab的背景色，仅支持十六进制颜色。

borderStyle：tabbar上边框的颜色， 仅支持 black / white。

position：tabBar的位置，默认值是: bottom，仅支持 bottom / top。当 position 为 top 时，不显示 icon。

custom：自定义tabBar。

（2）list

list：tab的列表。

list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。

pagePath：页面路径，必须在pages 中先定义。

text：tab 上按钮文字。

iconPath：图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。selectedIconPath：选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。

（1）跳转普通页面

方法① navigator组件

方法② navigateTo()方法

navigateTo()方法，用于跳转普通页面。

（2）跳转tabBar页面

方法① navigator组件

如果要使用navigator组件跳转tabBar页面，需要设置open-type="switchTab"。

方法② switchTab()方法

switchTab()方法，用于跳转tabBar页面。

title：提示的标题

content：提示的内容

success：接口调用成功的回调函数。回调函数中的confirm属性返回true，表示点击的是确定按钮，否则是取消按钮。

title：提示的内容

icon：图标

duration：消息提示框的显示时间

mask：是否显示透明蒙层，防止触摸穿透

模块化语法有两种：① commonjs规范，② es6规范。

nodejs环境采用的就是commonjs规范。采用exports 或 module.exports 导出成员，采用require() 导入成员。

微信小程序支持commonjs规范，同时还支持官方的ES6规范。ES6规范采用export 导出成员，采用import 导入成员。

将封装的方法放到util目录下的js文件中。可以新建js文件，也可以写在直接util.js文件中。

（1）确认框方法

定义确认框方法，并导出

（2）消息框方法

定义消息框方法，并导出

（3）获取事件参数的方法

import是ES6的导入语句。

wx对象是微信小程序的全局对象，在任何地方都可以使用。

（1） 注册语句

（2） 在app.js入口文件中导入

注意： 注册给wx对象的方法，需要在app.js文件中导入，才可使用。

（3） 调用方法

wx.方法名(参数)

重磅：微信小程序发布WeUI.js 官方视觉组件库！

12月16日，微信正式发布了WeUI.js动态视觉组件库。WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，可以让用户的使用感知更加统一。WeUI.js动态视觉组件库包含了button、cell、dialog、progress、toast、article、actionsheet、icon等各式元素。

一、weui.js是什么？

weui.js是WeUI的轻量级JS封装，不需要依赖其它库，GZIP后仅有9.0 KB。

二、weui.js包含哪些组件？

actionsheet

alert

confirm

dialog

form

gallery

loading

picker

searchbar

slider

tab

toast

toptips

uploader

三、使用方式：

Github：

详细文档：

四、微信团队为何在此时公布官方视觉组件库：

1、为了更像微信OS

微信团队和之前的轻应用平台相比，不是简单为了给开发者和用户之间提供一个平台连接、也不是只为了做一个流量入口平台那么简单，而是为了打造一个完美的微信OS生态。当年百度、UC等平台推出的轻应用，更多的只是起到了一个平台倒流和连接的作用，并没有对开发框架和设计规范进行过如此统一的规范和要求。现在看来，最好的生态，当然是类似苹果安卓OS那样，所有的应用具备统一的开发框架和接近OS生态的完美体验。

2、为了极致的用户体验

从小程序内测到公测已经过去了三个月，我们有理由相信微信团队已经接到了不少小程序开发者的审核需求，这其中最让微信团队头疼的应该就是开发设计规范不符合微信团队的要求，达不到微信团队想要的那种用户体验。微信官方进一步推出Weui就是为了让所有开发者提交的小程序都能够接近微信APP的体验效果，从而给微信用户带去最佳的用户体验，这也是未来小程序生态能否提高8亿用户使用热度和频率的一个重要指标。

3、倒逼第三方服务商转型

微信团队在早年推出公众号的时候曾经推出过“开发者模式”，当时，微信团队鼓励第三方公司利用微信公众号开放的接口进行各种微应用的开发，比如：微网站、微商城，微工具等各种应用。但是，微信团队早期并没有对这些接入应用的开发框架和设计规范进行统一的定义和严格要求，导致每一个服务接入商基本都是按照自己的开发框架和设计标准进行开发来设计，使得市面上看到的这些应用页面呈现五花八门，用户体验极其糟糕，这也就造成了早期的应用服务被用户的接受度过低，同时无法给企业带来实际价值的症结所在。随着微信小程序的出现，微信团队重塑统一的开发框架和设计规范，倒逼这些第三方服务机构重新定义自己的跟随策略，按照新的开发规范重新提供新的平台服务。或许，现有的微信第三方服务机构格局将被打破，第三方服务机构将面临新一轮的洗牌。

五、WeUI.js给小程序开发者带来了哪些好处？

1、使用Weui设计出来的小程序如同用户使用微信客户端一样的视觉效果，可以让小程序的体验感更强。

2、使用Weui设计小程序更够提高开发者的开发效率，降低开发者的开发成本，从而让开发者更快的开发出符合规范的小程序。

3、使用Weui设计小程序如同您雇佣一支国内顶尖的设计团队帮您打造一个接近完美的视觉框架。

六、微信小程序给前端设计领域带来了那些影响和推动：

1、全平台兼容

微信小程序重新定义了APP，使得一款应用能够在android、iphone以及windows

phone中都能运行，对于前端来说实现了“一次编译，到处运行”的理念。

2、前端开发思维的改变

设计理念需要从传统的PC思维需要转向到以移动为先的思维，这其中主要考虑的差异化在于屏幕尺寸、网络带宽、输入设备等几个方面的不同。同时很多之前可以用于iOS与Android的控件需要在小程序上重新调整和创新。

3、推动前端技术的发展

微信小程序以其简单的开发环境，使以Javascript和HTML5为主的前端技术成为真正的主流，越来越多的人开始接触前端开发，为前端技术的发展贡献力量。

4、前端投入成本的增加

原本一家传统企业的前端开发人员需要覆盖PC端、移动端、APP应用等各种平台，微信小程序的出现会导致未来的前端开发人员还需要涉及小程序的前端开发设计，这在一定程度增加了前端开发人员学习和工作成本，同时也会给企业带来更多的人才投入成本。

5、前端人才的竞争更加明显

微信小程序的诞生会吸引一大批后台开发、APP开发的程序猿们加入前端开发大军，进一步冲击现有的前端开发人员的的知识结构，加剧前端开发岗位的竞争格局，迫使一些低端且知识结构不全面的前端开发人员面临被淘汰或者失业的风险。

6、全栈工程师会越来越吃香

随着微信小程序的出现，既懂后台，又懂前端的人才会越来越受到企业的重视和拥抱，特别对于创业团队和互联网企业来说，一个拥有全局思维、熟悉各种技术的人才非常重要。身为技术人员，我们需要不断拥抱变化，不断get新技能，努力成为一个全栈工程师。

微信正式发布WeUI.js动态视觉组件库，这意味着，大家可以在小程序里面，直接使用在官方设计文档附录中的视觉组件（而不需要额外引入其他库）。微信团队真的是用心在打造小程序生态，笔者也是真的在用心给大家带来更多干货，这也是笔者第一时间给大家带来的解读。码字不易，如果本文对你和你身边的朋友有所启发，感谢转发，你的支持是我们码字员最大的动力。