微信小程序使用jquery-微信小程序使用base64

主要分为4大块：

演示界面（左）

文件列表（中）

代码编写（右侧）

代码编译测试（右下）

因为功能和按钮比较多，所以在演讲的过程中，我基本上是演示一些主要功能的操作。 个人觉得还是比较简单的，这里就不啰嗦了。 不懂的可以加群了解。

标签

微信小程序的标签和我们平时做的其他项目有点不一样，自带一些专属的标签。 例如：

view（视图容器，相当于DIV）

text（文本，相当于P）

block（循环之类的，相当于UL、DL等）

image（图片，需要关闭）

navigator（也就是我们平时使用的A标签）

...

更多标签，我们可以参考：

WXSS 选择器

目前微信小程序支持的选择器：

和我们日常的CSS基本一样，省略。

代码配置： 1.小程序配置app.json

app.json是当前小程序的全局配置，包括小程序的所有页面路径、界面表现、网络超时、底部标签等。 下面是我的一个微信小程序项目的相关配置：

{
  "pages": [
    "pages/index/index",
    "pages/hangq/index",
    "pages/activity/index",
    "pages/login/index",
    "pages/logs/logs",
    "pages/succ/index"
  ],
  "window": {
    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#1B82D2",
    "navigationBarTitleText": "基准汇率",
    "navigationBarTextStyle": "#ffffff"
  },
  "tabBar": {
    "color": "#797979",
    "selectedColor": "#1B82D2",
    "borderStyle": "#E6E6E6",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/data-foot-i1.png",
        "selectedIconPath": "images/data-foot-i1o.png",
        "text": "基准汇率"
      },
      {
        "pagePath": "pages/hangq/index",
        "iconPath": "images/data-foot-i2.png",
        "selectedIconPath": "images/data-foot-i2o.png",
        "text": "外汇行情"
      },
      {
        "pagePath": "pages/activity/index",
        "iconPath": "images/data-foot-i3.png",
        "selectedIconPath": "images/data-foot-i3o.png",
        "text": "外汇开户"
      }
    ]
  },

  "debug": true
}

pages - 配置项目页面的地址列表；

window - 配置小程序头部的元素属性，分别是：是否加粗、背景、标题文字、文字颜色；

tabBar - 配置小程序底部的元素属性，包括：文本颜色、选中文本颜色、顶行颜色、背景、按钮和文本混合布局信息。

2.WXML模板

这与 HTML 非常相似，只是标签发生了变化。 可以看到下一段代码：

  
  
    恭喜您，开户成功！
    
      账号：300305490
      密码：J65323
    
  
  
    软件下载链接已发至手机短信
    激活立即享受200美元开户赠金
  

3.WXSS风格

WXSS 具有 CSS 的大部分特性，小程序也在 WXSS 中进行了扩展和修改。 建议多使用flexbox，使用rpx单元等。

4.JS交互逻辑

一个服务仅仅展示界面是不够的，它还需要和用户进行交互：响应用户的点击，获取用户的位置等等。 在小程序中，我们通过编写JS脚本文件来处理用户操作。 微信小程序中JS的写法和我们日常生活有点不一样，看代码：

// pages/login/index.js
Page({
  data: {
    tip: '',

    userName: '',
    phoneNumber: '',
    mailName: ''
  },
  formBindsubmit: function (e) {
    var patten = new RegExp(/^[w-]+(.[w-]+)*@([w-]+.)+[a-zA-Z]+$/);
    var regtel=new RegExp('(^1[3|4|5|7|8][0-9]{9}$)','g');
    if (e.detail.value.userName.length == 0) {
      this.setData({
        tip: '请输入正确的用户名！',
      })
    } else if (e.detail.value.phoneNumber.length ==0) {
      this.setData({
        tip: '请输入手机号码！',
      })
    } else if (e.detail.value.phoneNumber.length != 11) {
      this.setData({
        tip: '手机号码必须是11位数字哟！',
      })
    } else if (e.detail.value.mailName.length == 0) {
      this.setData({
        tip: '请输入正确的邮箱！',
      })
    } else {
      wx.navigateTo({ url: '/pages/succ/index' })  
      this.setData({
        tip: '信息正确',        
      })
    }

  }  
})

这是一个非常简单的表单验证代码，功能不全，旨在体现写作格式，仅供参考。

模块化的

微信小程序公共模块的调用和我们日常使用有些不同：

WXSS：

@import "common.wxss";

XML:

如果你关注项目，就不会有问题。 这样比较容易理解。

微信小程序官方设计规范

每个产品都会有自己的一套规范，当然，你是否遵守这些规章制度，因人而异。 分享的就不多说了，提供两个地址：

大家自己下去研究吧。

案例分析

在分享的过程中，我准备了一些案例，大家可以点击下载：DEMO。 然后在开发者工具中打开就可以看到效果了。

爬坑

刚开始玩微信小程序的时候，踩过一些坑。 分享过程中列举了一些，贴出来提醒大家不要误入歧途，^_^。

1.添加外部字体方法

常用方法：

@font-face {
font-family: '字体名称';
src: url("../../resources/font/UKIJTuzTom.ttf");
font-weight: normal;
font-style: normal;
}

经测试，无论是本地路径还是外网路径，在小程序中都没有影响。 需要使用base64编码。 在线生成base64编码方式：

调用方法：

src: url(data:application/font-woff2;charset=utf-8;base64....

如果你不知道怎么做，加个群问。

2.图片的使用

常用方法：

background-image:url("本地路径")

在小程序中没有作用，需要转成base64编码。

---------------------------------------------- ---

// WXSS中Base64的使用

.box{background-image: url("data:image/jpg;base64,/9j/4Q...");}

// WXML中Base64的使用【建议小于10K的图片可以考虑使用该方式】

3.更改表单占位符的默认颜色

如何每天更改默认输入框颜色

输入::-webkit-输入占位符

如果小程序不支持，则需要使用以下方法：

将属性添加到输入：

占位符样式 =“颜色：#BCBCBC” 或

placeholder-class="样式名称"

4.底部导航

tabBar是一个数组，只能配置最少2个，最多5个tab，tab按数组顺序排列。

5.页面预览深度

微信小程序的页面路径限制为最多5层微信小程序使用jquery，超过5层的页面将不会被重定向并抛出错误信息。 但是在我们产品的一些业务场景中，页面路径有5层以上。 在这种情况下，我们不得不牺牲一定的用户体验来保证功能的完整性。

因此，在产品规划时，需要注重页面间的交互，尽量在5层交互之内完成流程。

示范案例：7five

6.jQuery库

zepto/jQuery会用到window对象和document对象，微信小程序不支持，所以不能用。

在平时的交互中，使用微信标准写法或者原生javascript来实现效果。 '

7. 资源利用

1）图片资源：

尽量避免大图片和长列表图片，这两者都可能导致内存占用增加和掉帧。

2）代码包大小：

小程序开始时，代码包限制为1MB，后来增加到2MB。 对于开发者来说，代码包上限的提升可以实现更丰富的功能，但对于用户来说，也增加了下载流量和对本地空间的占用。

3）设置数据

数据处理的内容很多。 更多信息请参考官方文档。

总结

OK，这次微信小程序的分享基本就这些内容了微信小程序使用jquery，因为时间只给了1个小时，所以一些功能和技术点只是简单的提一下，并没有深入的讲解。 这就需要大家在具体的项目中慢慢体会，去研究。