精华内容
下载资源
问答
  • 更具本地程序做验证 网页
    千次阅读
    2020-03-27 16:54:04

    云开发(Tencent Cloud Base,TCB)是腾讯云为移动开发者提供的一站式后端云服务,它帮助开发者统一构建和管理资源,免去了移动应用开发过程中繁琐的服务器搭建及运维、域名注册及备案、数据接口实现等繁琐流程,让开发者可以专注于业务逻辑的实现,而无需理解后端逻辑及服务器运维知识,开发门槛更低,效率更高。

    官方教程:https://tencentcloudbase.github.io/

    Web 端调用云开发

    开通步骤

    1. 先开通小程序的云开发环境,若已开通,此步骤可忽略。
    2. 访问腾讯云云开发,以“微信公众号”进行登录,授权所需小程序即可登录。(每个小程序对应着独立的腾讯云账号,当然也可以在腾讯云的账号上绑定唯一的一个小程序。)
    3. 在“用户管理=>登录设置”开通“匿名登录”。(我的目标是跑通 Web 端,所以此处并未对完整登录校验做深入讨论。)

    如果有疑问,可以在腾讯云上提工单,工单的回复速度比较快。

    配置方法

    方案一:Script 引入

    适合普通网页使用

    <script src="//imgcache.qq.com/qcloud/tcbjs/1.3.8/tcb.js"></script>
    <script>
      var app = tcb.init({
        env: 'development-v9y2f'
      })
    </script>
    

    以 npm 引入

    云开发可以通过 tcb-js-sdk 来访问:

    npm install --save tcb-js-sdk@latest
    

    要在你的模块式使用模块可以

    const tcb = require('tcb-js-sdk');
    

    import * as tcb from 'tcb-js-sdk';
    
    // 初始化环境
    const app = tcb.init({
      env: '你的环境 Id'
    });
    

    tcb-js-sdk 支持多端适配,如微信小程序、Web 端、QQ 小游戏等,具体可以看 https://github.com/TencentCloudBase/tcb-js-sdk/blob/master/docs/adapters.md

    而我的代码是基于 Taro 跨端框架。

    import * as tcb from 'tcb-js-sdk';
    
    componentWillMount() {
    
      //
      if (process.env.TARO_ENV === 'weapp') {
        Taro.cloud.init({
          env: '环境 ID'
        })
      } else if (process.env.TARO_ENV === 'h5') {
        // 将TCB绑定到 Taro.coud 上便于全局使用
        // 实测 tcb-js-sdk 大部分的 API 与wx.cloud好像一样
        Taro.cloud = tcb.init({
          env: '环境 ID'
        })
    
        // 匿名登录
        Taro.cloud.auth().signInAnonymously().then(() => {
    
          // 这里代码可以不写,我是想调用云开发的云函数,来验证是否成功调用。
          Taro.cloud.callFunction({
            name: 'thanks-data',
            data: {}
          }).then(res => console.log('thanks-data res', res))
    
        }).catch(error => {
          console.log('error :', error);
        })
      }
    }
    
    

    这里补充一些关于 Taro 的信息

    Taro 是一套遵循 React 语法规范的 多端开发 解决方案。

    使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等)运行的代码。

    项目开发中所踩的坑

    适配过程

    从微信小程序迁移到 Web 端,不是一蹴而就的。在我的“快快戴口罩”小程序中,我是基于以下三个页面来完成的:

    • 致谢页(pages/thanks/thanks):调用云函数,让页面正常运转
    • 圣诞帽 canvas 画图(pages/test/test):调用云函数,自动在canvas画上人物图片和圣诞帽,完成小程序端与 Web 端的适配。
    • 口罩页(pages/wear-a-mask/wear-a-mask):完整流程,包含云开发、UI 适配、图片识别及图片生成等。

    画布功能

    小程序侧 所要绘制的图片资源(网络图片要通过 getImageInfo / downloadFile 先下载),也就是说,小程序上所需的是有效的本地图片地址,比如本地路径、代码包路径。

    Web 端 需要的是 Img 元素在 onload 后,也就是需要将图片加载完后再进行绘制。

    // Web 端,获取图片元素
    const getH5Image = (src) => {
      return new Promise((resolve, reject) => {
        const image = new Image()
        image.setAttribute('crossOrigin', 'anonymous');
        image.src = src
        image.id = `temp_image_${Date.now()}`;
        image.style.display = 'none';
        document.body.append(image);
        image.onload = () => resolve(image)
        image.onerror = () => reject(image)
      })
    }
    
    // 获取网络图片
    export const getImg = async (src) => {
    
      try {
        if (process.env.TARO_ENV === 'h5') {
          let image = await getH5Image(src)
          return image
        }
    
        if (src.includes(';base64,')) {
          return await base64src(src)
        }
    
        const res = await Taro.getImageInfo({
          src
        })
        return res.path
    
      } catch (error) {
        console.log('error :', error);
        throw error
    
      }
    }
    

    样式适配

    Taro H5 版本上少了一些样式适配。

    <!-- index.html 加入iPhone X适配-->
    <meta content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" name="viewport">
    
    html #app .taro_page {
      height: 100%;
    }
    html button {
      display: inline-block;
      width: auto;
      border: none;
    }
    html .taro-text {
      white-space: pre-line;
    }
    /* iPhone x异形屏适配 */
    html .taro-tabbar__tabbar-bottom {
      margin-bottom: calc(env(safe-area-inset-bottom) / 3);
    }
    

    功能隐藏

    小程序特有,Web 端缺失

    分享给朋友 Button

    <Button className='share-btn' openType='share'>分享给朋友<View className='share-btn-icon'></View></Button>
    

    图片压缩 wx.compressImage

    文章相关内容:

    珍爱生命,从我做起,快点戴上口罩,给大家介绍我开源的 Taro + 腾讯云开发 小程序「快快戴口罩」它可以智能识别人脸,给集体照戴上口罩。(* ̄︶ ̄)

    采用 Taro 跨端框架,采用腾讯云开发模式,采用基于腾讯云的五官分析的人脸识别,实现了自动为头像戴上口罩的功能。

    源码地址:

    https://github.com/shenghanqin/quickly-mask

    我是 盛瀚钦,沪江 CCtalk 前端开发工程师,Taro 框架的 issue 维护志愿者,主要侧重于前端 UI 编写和团队文档建设。

    主要功能

    • 智能识别人脸,进行五官定位
    • 支持多人识别,并戴上口罩
    • 以后会增加多种节日的效果

    扫码预览

    微信搜一搜:快快戴口罩

    小程序截图

    更多相关内容
  • 手把手教你:微信小程序内嵌网页或H5页面

    万次阅读 多人点赞 2018-11-16 08:15:15
    对小程序开发一点都不了解的...微信小程序内嵌网页或H5页面,总结起来就是在小程序页面中添加一行如下代码 <web-view src="https://www.**888.com"></web-view> 其中https://www.**888.com就是所嵌入...

    对小程序开发一点都不了解的小白鼠,经过昨天下午半天的研究,终于实现小程序内嵌H5页面功能,下面把经验和代码分享给大家,请多多指教!

     

    微信小程序内嵌网页或H5页面,总结起来就是在小程序页面中添加一行如下代码

    <web-view src="https://www.**888.com"></web-view>

    其中https://www.**888.com就是所嵌入的H5页面。

    源码和具体的使用细则,可以到下载源码及使用说明 。

     

    下面进入正题:

    一、注意事项
    1.1注册小程序账号必须为企业的。因为个人类型与海外类型的小程序暂不支持使用web-view组件。
    1.2嵌入的H5页面,必须放在自己的服务器中。自己的服务器外网可以访问且已配置HTTPS访问。

     

    二、具体步骤
    2.1小程序开发环境准备(注册企业小程序账号,下载小程序开发环境,开发HelloWorld小程序)

    注册企业小程序账号

    请参考微信小程序官网https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18111420

    不会操作的,可以在文章最下方下载注册企业小程序账号步骤,详细截图及各步骤中的注意事项,这里就不累赘说明了。

     

    下载小程序开发环境和开发HelloWorld小程序

    请参考微信小程序官网https://developers.weixin.qq.com/miniprogram/dev/#安装开发工具


    2.2小程序中嵌入H5页面(H5页面对应的服务器配置https访问,小程序中配置服务器域名和业务域名,新建嵌入H5小程序项目)

    H5页面对应的服务器配置https访问

    请参考我另外一篇博客,地址https://blog.csdn.net/jlq_diligence/article/details/84107729

    如果在移动手机中访问嵌入H5页面时,提示“该证书并非来自可信的授权中心”,说明证书有问题或者配置证书不对,可以在博客中留言,我看到时,给你回复。

    小程序中配置服务器域名和业务域名

    登录小程序账号后,进入“设置-》开发设置”界面,在页面中部,有个“服务器域名”和“业务域名”,这2个都是挨着的,如何配置具体如下:

    设置https://mini.***.com后的截图为:

    注意:域名使用一级域名,例如www.***.com,不要配置demo.***.com二级域名,不然验证不过。

    配置成功后的截图如下:

     

    新建嵌入H5小程序项目

    选择“小程序项目”后,出现如下界面:

    登录 https://mp.weixin.qq.com ,我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。

    设置后为:

    确定后,弹出如下界面:

    代码如下:

    <!--index.wxml-->
    <view class="container">
      <view class="userinfo">
        <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
        <block wx:else>
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
      
      <web-view src="https://www.**888.com"></web-view>
    </view>
    

    添加H5页面后,编译-》预览,再打开微信,扫预览二维码,就大功告成了。

    自己整理的文档目录结构如下,如果有需要,可以从最下方的链接进行下载:

    源码和具体的使用细则,可以到下载源码及使用说明 。

     

     

     

    展开全文
  • 下面对微信web开发者工具个简单的介绍 下载: 在上篇已经介绍过下载式了,可到微信小程序开发详细流程 一 (注册小程序及开发工具的下载)查看详细内容 下载地址: 前往开发者工具下载页面 模拟器:UI视图 这里...

    下面对微信web开发者工具做个简单的介绍

    下载:

    在上篇已经介绍过下载式了,可到微信小程序开发详细流程 一 (注册小程序及开发工具的下载)查看详细内容

    下载地址:

    前往 开发者工具下载页面

    模拟器:UI视图

    这里是个小程序的模拟器,建议使用iphone6,原因后面会说到,

     

    这里是小程序的一个功能区域啊,下面会一个逐一讲解,先看下一块,

     

    这个区域是我们在调试的时候,去查看变量的值和状态的一个区域

     

     

    我们来看一下编辑区域:

    编辑区域就是我们要写代码的地方了,左侧就是一个树状管理器,目录结构文件类型会在后面(小程序文件类型与代码构成)的文章做讲解.

    点击上面的"+"号会创建目录和文件,如下图,

    如果要在根目录下创建文件夹,如下图,

    小程序还给了一个很好的查找功能,点击放大镜,可以快速匹配到与你关键字相关的页面

     

    调试:

    就是上在说的调试器了,

    Console:

    顾名思义就是控制台了,会显示一些编译错误啊或是警告信息之类的,还有console.log()时,输出自己调试的一些信息

    Sources:

    这个能功区域主要就是让我们用打断点的,调试代码的,断点打在.JS文件(调试快捷键F10\F8)

    左侧是编译过后的一个树状目录结构,和刚刚上面的目录是对应该的,但是它会把一些WXML,WXSS等文件编译了,所以在这里是看不到的,这里就只有JS

     

    这里你会发现同一个文件名会有两个JS,一个是.js的,一个是后面带[sm]的,他们两个有什么区别呢,

    [sm]文件,其实就是你的源代码文件,它跟你编译器里写的代码是一模一样的.

    .js文件其实是已经给你编译过后的文件.看下图

     

    Network:

    这个大家应该都比较熟悉了,就看几个常用用要的话,比如左侧NAME,这就是些网络链接具体的列表

    这里应该是用的最多的,是具体查看每一个网络请求信息的一个地方,

    比如这个

    headers:就是显示一个它的每一个

    preview:就是一个预览

    http:请求头的一个信息.response就是显示的请求返回信息的一个地方

    timingz:每一个请求的具体耗费时间的一个管理

     

    Storage:

    查看缓存数据

    小程序有个很牛逼的地方就是支持本地缓存,比如我现在的项目,用户第一次使用输入身份证号,下次使用会默认填充

     

    AppData:

    根页面相关的,进行数据绑定的

    后面具体用到数据绑定的时候会再详细介绍,

        Wxml:

    实际就是小程序的一个UI界面,和UI代码

     

    这些功能都一目了然了,我就不说什么了

    再多说一句,因为小程序会校验证书,如果你是测试开发,在"详情"勾选不校验

     

    了解了这些基本就没什么问题了

    展开全文
  • 第一个微信小程序的诞生

    千次阅读 多人点赞 2022-07-10 09:33:04
    下一步:邮箱激活账号信息填写完进入邮箱激活,需要到邮件里面验证登录使用电脑登录邮箱,我这里是网易邮箱,可使用QQ,步骤一样最后一步:信息登记,就可以拥有自己的小程序帐号。手机微信为管理员扫描二维码在这个...

    👩‍💻博客主页:choice~的博客主页
    ✨欢迎关注🖱点赞🎀收藏⭐留言✒
    🔮本文由choice~原创,csdn首发!
    😘系列专栏:C语言进阶数据结构与算法牛客刷题训练营
    👕参考网站:牛客网
    💻首发时间:🎞2022年7月10日🎠
    🎨你的收入跟你的不可替代成正比
    💬给大家介绍一个求职刷题收割offer的地方👉点击进入网站

    小程序简介

    小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。

    小程序技术发展史

    小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时,微信就有相关的 JS API 了。随着APP市场的饱和,大部分用户已经养成了使用习惯,开发新的APP很难在市场生存。此外,APP开发和推广成本高也是不争的事实。易观2018年3月份的报告显示,移动电商APP的下载成本高达120-200 元,而且这些后期未必能形成转化。互联网金融、二手车电商APP的新客户成本,更是动辄高达数千元。因此,不少“码农”们决定开始向小程序市场“跳槽”。
    在这里插入图片描述

    开始

    开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。

    跟随这个教程,开始你的小程序之旅吧!

    申请帐号

    进入小程序注册页 根据指引填写信息和提交相应的资料;注意邮箱是没有被微信号或者公众号绑定,如果绑定了可以解绑就可以使用。

    image-20220710082841439

    下一步:邮箱激活账号信息填写完进入邮箱激活,需要到邮件里面验证登录

    image-20220710083910745

    使用电脑登录邮箱,我这里是网易邮箱,可使用QQ,步骤一样

    image-20220710084242954

    最后一步:信息登记,就可以拥有自己的小程序帐号。

    image-20220710084413776

    手机微信为管理员扫描二维码

    image-20220710084636286

    在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。

    登录 小程序后台 ,我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

    image-20220710085002737

    小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。

    有了小程序帐号之后,我们需要一个工具来开发小程序。

    安装开发工具

    前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》

    image-20220710085353129

    image-20220710085640632

    打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

    你的第一个小程序

    新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,勾选 “不使用云服务” (注意: 你要选择一个空的目录才可以创建项目),点击新建,你就得到了你的第一个小程序了,点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

    image-20220710090102969

    接下来我们来预览一下这个小程序的效果。

    编译预览

    点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小程序。

    image-20220710091414588

    你已经成功创建了你的第一个小程序,并且在微信客户端上体验到它流畅的表现。

    小程序代码构成

    在上一章中,我们通过开发者工具快速创建了一个 QuickStart 项目。你可以留意到这个项目里边生成了不同类型的文件:

    1. .json 后缀的 JSON 配置文件
    2. .wxml 后缀的 WXML 模板文件
    3. .wxss 后缀的 WXSS 样式文件
    4. .js 后缀的 JS 脚本逻辑文件

    接下来我们分别看看这4种文件的作用。

    JSON 配置

    JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。

    我们可以看到在项目的根目录有一个 app.jsonproject.config.json,此外在 pages/logs 目录下还有一个 logs.json,我们依次来说明一下它们的用途。

    小程序配置 app.json

    app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下:

    {
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle":"black"
      }
    }
    

    image-20220710092419880

    我们简单说一下这个配置各个项的含义:

    1. pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
    2. window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。

    其他配置项细节可以参考文档 小程序的配置 app.json

    工具配置 project.config.json

    通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。

    image-20220710092527411

    考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

    {
      "description": "项目配置文件,详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
      "packOptions": {
        "ignore": [],
        "include": []
      },
      "miniprogramRoot": "miniprogram/",
      "compileType": "miniprogram",
      "projectname": "ts-demo",
      "setting": {
        "useCompilerPlugins": [
          "typescript"
        ],
        "urlCheck": true,
        "coverView": true,
        "es6": true,
        "postcss": true,
        "lazyloadPlaceholderEnable": false,
        "preloadBackgroundData": false,
        "minified": true,
        "autoAudits": false,
        "uglifyFileName": false,
        "uploadWithSourceMap": true,
        "enhance": true,
        "showShadowRootInWxmlPanel": true,
        "packNpmManually": false,
        "packNpmRelationList": [],
        "minifyWXSS": true,
        "useStaticServer": true,
        "showES6CompileOption": false,
        "checkInvalidKey": true,
        "babelSetting": {
          "ignore": [],
          "disablePlugins": [],
          "outputPath": ""
        },
        "disableUseStrict": false,
        "minifyWXML": true
      },
      "simulatorType": "wechat",
      "simulatorPluginLibVersion": {},
      "condition": {},
      "srcMiniprogramRoot": "miniprogram/",
      "appid": "wx9eea25714095af27",
      "libVersion": "2.25.0",
      "editorSetting": {
        "tabIndent": "insertSpaces",
        "tabSize": 2
      }
    }
    

    其他配置项细节可以参考文档 开发者工具的配置

    页面配置 page.json

    这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

    image-20220710092645438

    如果你整个小程序的风格是蓝色调,那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块,因此我们提供了 page.json,让开发者可以独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等。

    {
      "name": "miniprogram-ts-less-quickstart",
      "version": "1.0.0",
      "description": "",
      "scripts": {
      },
      "keywords": [],
      "author": "",
      "license": "",
      "dependencies": {
      },
      "devDependencies": {
        "miniprogram-api-typings": "^2.8.3-1"
      }
    }
    
    

    其他配置项细节可以参考文档 页面配置

    JSON 语法

    这里说一下小程序里 JSON 配置的一些注意事项。

    JSON文件都是被包裹在一个大括号中 {},通过 key-value 的方式来表达数据。JSON的 Key 必须包裹在一个双引号中,在实践中,编写 JSON 的时候,忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

    JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。

    1. 数字,包含浮点数和整数
    2. 字符串,需要包裹在双引号中
    3. Bool值,true 或者 false
    4. 数组,需要包裹在方括号中 []
    5. 对象,需要包裹在大括号中 {}
    6. Null

    还需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错。

    WXML 模板

    从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。

    image-20220710092748433

    同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml,你会看到以下的内容:

    <view class="container">
      <view class="userinfo">
        <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
        <block wx:else>
          <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>
    

    HTML 非常相似,WXML 由标签、属性等等构成。但是也有很多不一样的地方,我们来一一阐述一下:

    1. 标签名字有点不一样

      往往写 HTML 的时候,经常会用到的标签是 div, p, span,开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件,例如日历、弹窗等等。换个思路,既然大家都需要这些组件,为什么我们不能把这些常用的组件包装起来,大大提高我们的开发效率。

      从上边的例子可以看到,小程序的 WXML 用的标签是 view, button, text 等等,这些标签就是小程序给开发者包装好的基本能力,我们还提供了地图、视频、音频等等组件能力。

      更多详细的组件讲述参考下个章节 小程序的能力

    2. 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

      在网页的一般开发流程中,我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树),以引起界面的一些变化响应用户的行为。例如,用户点击某个按钮的时候,JS 会记录一些状态到 JS 变量里边,同时通过 DOM API 操控 DOM 的属性或者行为,进而引起界面一些变化。当项目越来越大的时候,你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这不是一个很好的开发模式,因此就有了 MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOMJS 只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。

      小程序的框架也是用到了这个思路,如果你需要把一个 Hello World 的字符串显示在界面上。

      WXML 是这么写 :

      <text>{{msg}}</text>
      

      JS 只需要管理状态即可:

      this.setData({ msg: "Hello World" })
      

      通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。

    更详细的文档可以参考 WXML

    WXSS 样式

    WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

    1. 新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。
    2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
    3. 此外 WXSS 仅支持部分 CSS 选择器

    更详细的文档可以参考 WXSS

    JS 逻辑交互

    一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。

    <view>{{ msg }}</view>
    <button bindtap="clickMe">点击我</button>
    

    点击 button 按钮的时候,我们希望把界面上 msg 显示成 "Hello World",于是我们在 button 上声明一个属性: bindtap ,在 JS 文件里边声明了 clickMe 方法来响应这次点击操作:

    Page({
      clickMe: function() {
        this.setData({ msg: "Hello World" })
      }
    })
    

    响应用户的操作就是这么简单,更详细的事件可以参考文档 WXML - 事件

    此外你还可以在 JS 中调用小程序提供的丰富的 API,利用这些 API 可以很方便的调起微信提供的能力,例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中,在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称,最后通过 setData 把获取到的信息显示到界面上。更多 API 可以参考文档 小程序的API

    你了解了小程序涉及到的文件类型以及对应的角色,我们把这一节所涉及到的文件通过 “小程序的框架” 给 “串” 起来,让他们都工作起来。

    展开全文
  • 微信小程序开发流程

    千次阅读 2022-07-20 15:04:13
    用户只需要点击一键登录,就可以做到登录,无需另外多出弹框,提示用户授权,之所以弹出框是为了获取多的用户信息,如想获取手机号,一个用户手机号可以存在多个,但是用户openid是唯一的,参考线上小程序。...
  • 排名前20的网页爬虫工具

    万次阅读 2019-07-17 13:24:49
    它会在将网站内容下载到硬盘之前扫描指定的网站,并自动重新映射网站中图像和其他网页资源的链接,以匹配其本地路径。还有其他功能,例如下载包含在副本中的URL,但不能对其进行爬虫。还可以配置域名,用户代理字符...
  • 有了小程序ID和小程序密钥的,我们就可以在手机上查看调试微信小程序了。创建项目要填写注册时拿到小程序ID第二次创建项目,发现项目目录下不会以项目名称自动创建同名的目录,这一点很不好。创建成功后,点击左侧的...
  • 1.确认开发者工具是否开启不验证合法域名,先关闭不校验合法域名 ⬇️ 2.查看工具的报错域名信息 ⬇️ 3.小程序后台的服务器域名填写处添加工具里报错的域名...
  • 基于微信小程序的课堂考勤系统设计与实现

    千次阅读 多人点赞 2021-09-02 15:59:04
    程序比传统的网页使用体验好,它使用了WebSocket双向通信以及本地缓存技术[11],这样一来,微信小程序的使用感受更加接近了传统的手机APP,小程序开发人员在写代码的过程中,可以直接调用各种API,不用考虑兼容...
  • 最近有个移动项目关于饮料行业经销商及业务员管理的,主要功能有... 项目初期考虑APP,先用安卓尽快出个1.0版本,一来现有人员可以马上上手,二来开发相对较快、可以通过1.0版本验证及完善需求;然后再开发IOS版...
  • 为了帮助开发者简单和高效地开发和调试, 微信小程序微信官方在原有的公众号网页调试工具的基础上, 推出了全新的 微信开发者工具, 集成了公众号网页调试和小程序调试两种开发模式。 首先我们需要下载并安装微信...
  • 零基础入门小程序云开发云函数
  • html身份认证Ukey

    2015-03-31 09:52:05
    网页访问本地U盘验证程序程序是经科因软件团队测试通过后,进行基本封装发布的控件,可供需要身份认证的软件系统嵌入调用。作用是以本地U盘作为身份认证工具,通过网页访问进行验证, 当验证匹配成功,则允许相应...
  • 怎么样抓取微信小程序

    千次阅读 多人点赞 2019-05-05 23:01:55
    阅读文本大概需要 12 分钟。一 爬虫万能公式最近痴海接到一些新的需求,要抓取微信小程序上的内容。写过爬虫的同学都知道,无论什么爬虫大体的思路都是相的,都是要分析网络请求...
  • BurpSuite工具详解及暴库示例

    千次阅读 2022-04-19 10:16:11
    无缝地融合在一起,以支持整个测试过程中,从最初的映射和应用程序的攻击面分 析,到发现和利用安全漏洞。 Burp Suite为这些工具设计了许多接口,以加快攻击应用程序的过程。所有工具都共享 一个请求,并能处理...
  • 文章目录一、网页篡改简介二、网页篡改检测技术1、外挂轮询技术2、核心内嵌技术3、事件触发技术三、网页篡改应急响应方法1、发生网页篡改2、隔离被感染的服务器/主机2.1、针对被篡改的网页2.2、针对未被篡改的网页3...
  • 智能家居目前越来越火,微信小程序可以跨平台开发,所以有必要开发一个智能家居框架!而本框架支持断线重连!重新订阅主题!拓展性强,与具体的通讯协议没有任何耦合!开发者可以根据自己业务来协议!
  • 今天来给大家讲解一个完整的微信小程序点餐项目。java后台+微信小程序实现点餐系统。 第一章,技术选型 1,后台技术选型: JDK8/Java11 Mysql5.7/Mysql8 Spring-boot2.2.4 Spring-data-jpa Lombok Freemarker ...
  • H5和微信小程序直播开发

    千次阅读 2020-12-30 11:31:30
    如果想的卓越必须必备另一些大前端技能,比如说NodeJS,express.js, koaJs服务类,或者three.js这类3d数据图像,还有二维图像处理,比如d3,raphael, echart, 最后hls, flv视频行业。 如果只会ES6,Vue,React, ...
  • 1. 介绍 Browser Sandbox是一个浏览器沙箱,可以在单个物理设备上同时在线运行IE、Chrome、Firefox等浏览器的多个版本,可以使用它对Web网页进行浏览器的兼容性测试,在Turbo平台上安装所需的浏览器组件即可运行,它...
  • 2021年软件测试工具趋势

    千次阅读 2021-11-19 14:21:08
    另外,JMeter 能够对应用程序做功能/回归测试,通过创建带有断言的脚本来验证你的程序返回了你期望的结果。为了最大限度的灵活性,JMeter 允许使用正则表达式创建断言。 官网地址: https://jmeter.apache.org/ 23、...
  • 在爬取淘宝等需要登陆的网站时,模拟点击打开新的页面往往需要重新登陆,这时可以通过采用本地打开一个浏览器,设置监听端口,在该端口下模拟浏览器,这样浏览器会记住所有的用户行为,只要登陆过一次就不必重复登录...
  • 接口一般来说有两种,一种是程序内部的接口,一种是系统对外的接口。
  • 批量保存网页

    千次阅读 2021-02-21 10:06:24
    文章目录背景工具SeleniumgeckodriverPyUserInput工具下载和安装代码总结 背景 之前已经写了 2 篇文章: 备份 CSDN 博客(上) 备份 CSDN 博客(下) ...Selenium 是一个用于 Web应用程序测试的工具。Selenium 测试直
  • ASP.NET程序设计复习题

    千次阅读 2019-12-23 22:18:48
    (1)ASPX网页的代码储存模式有两种,它们是代码分离模式和单一模式。 (2)当一个Web 控件上发生的事件需要立即得到响时,应该将他的 AutoPostBack属性设置为true 。 (3)请将下列数据(nn )在TextBox 控件中...
  • WEB服务器的概念,一般指的是网站服务器,也就是我们打开的各种网站的数据来源,他实际上是服务器上运行的应用程序,这个程序通过HTTP协议与游览器等客户端进行通信,把网页展现给用户。web服务器的工作原理(B/S)...
  • 不需要第三方自己额外做更多工作,但有的接口是6.0.2新引入的,只有新版才可调用) 该公众号支付签名无效,无法发起该笔交易(请确保你使用的 jweixin.js 是官方线上版本,不仅可以减少用户流量,还有可能对某些 bug...
  • 网络安全渗透高级工具(黑客工具软件大全100套)

    万次阅读 多人点赞 2019-05-25 00:33:55
    黑客工具软件大全100套 1 Nessus:最好的UNIX漏洞扫描工具 Nessus 是最好的免费...它的主要功能是远程或本地(已授权的)安全检查,客户端/服务器架构,GTK(Linux下的一种图形界面)图形界面,内置脚本语言编译器...
  • 扒站工具推荐

    万次阅读 2019-03-12 23:37:26
    文章目录背景推荐程序小结 背景 网络爬行(也称为网络抓取)在当今的许多领域得到广泛应用。它的目标是从任何网站获取新的或更新的数据并存储数据以便于访问。Web爬虫工具越来越为人所知,因为Web爬虫简化并自动化了...
  • Postman鉴权

    万次阅读 2021-10-28 14:09:59
    鉴权(authentication) 是指验证用户是否拥有访问系统的权利。传统的鉴权是通过密码来验证的。这种方式的前提是,每个获得密码的用户都已经被授权。在建立用户时,就为此用户分配一个密码,用户的密码可以由管理员...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,435
精华内容 21,374
热门标签
关键字:

更具本地程序做验证 网页