安装好 微信web开发者工具后。

让我们来了解一下工具的框架,上图:

工具总共分为三个部分,左上角红框框:

  模拟器:模拟手机小程序界面,模拟器左上角可以选择手机型号,右上角红框处,千万别选成Office 否者会影响后边的运行。

  编译器:上图 然后挨着讲解

pages:根目录页 在这里创建页面。 例如 index文件夹,index文件里又可以创建四个文件 后缀分别是.js .json .wxml .wxss

一般页面 只有三个页面 也就是 没有json

.js逻辑页面。针对页面数据做出相应的处理

.wxml 页面结构 用类似 div 布局 然而这里边用<view></view>

.wxss 页面样式 类似css 主要的处理页面的样式

log:

  logs ·································· logs页面
  logs.js ······························· logs页面逻辑
  logs.wxml ···························logs页面结构
  logs.wxss ···························logs页面样式

utils:

utils ······································ 公共脚本目录
  util.js ·······································工具脚本
  app.js ····································· 应用程序逻辑
  app.json ··································应用程序配置
  app.wxss ·································应用程序公共样式

每添加一个页面都需要在 app.json   pages 里写上路径 比如  "pages/index/index" 不写会报错。

  调试器:相当于VS 里的一个调试。很好用,以及会对错误的一个大概报告。

总结:太啰嗦了。。。。

微信小程序(二)框架的基本组成的更多相关文章

  1. 图片的URL上传至阿里云OSS操作(微信小程序二维码返回的二进制上传到OSS)

    当我们从网络中获取一个URL的图片我们要存储到本地或者是私有的云时,我们可以这样操作  把url中的图片文件下载到本地(或者上传到私有云中)  public String uploadUrlToOss ...

  2. 微信小程序 wafer2框架摘要

    微信小程序 wafer2框架摘要 帮助文档:https://github.com/tencentyun/wafer2-startup/wiki 使用了knex.js进行数据库交互,使用了koa.js进 ...

  3. Java 获取微信小程序二维码(可以指定小程序页面 与 动态参数)

    一.准备工作 微信公众平台接口调试工具 小程序的唯一标识(appid) 小程序的密钥(secret) 二.获取access_token 打开微信公众平台接口调试工具,在参数列表中输入小程序的appid ...

  4. 微信小程序(二十)-UI组件(Vant Weapp)-01按装配置

    1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 ...

  5. 微信小程序二维码推广统计

    微信小程序可以通过生成带参数的二维码,那么这个参数是可以通过APP的页面进行监控的 这样就可以统计每个二维码的推广效果. 今天由好推二维码推出的小程序统计工具HotApp小程序统计也推出了带参数二维码 ...

  6. 微信小程序二维码是无法识别二维码跳转到小程序

    今天测试了一下,微信小程序圆形二维码是不能直接识别跳转到小程序: 但h5页面的那种微信公众号二维码是可以直接识别

  7. 微信小程序-二维码汇总

    小程序二维码在生活中的应用场景很多,比如营销类一物一码,扫码开门,扫码付款等...小程序二维码分两种? 1.普通链接二维码 即跟普通的网站链接生成的二维码是一个意思,这种二维码的局限性如下: 对于普通 ...

  8. php生成微信小程序二维码源码

    目前有3个接口可以生成小程序码,开发者可以根据自己的需要选择合适的接口.第一步:获取   access_token public function getWxAccessToken(){ $appid ...

  9. 微信小程序开发-框架

    小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务.框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框 ...

  10. 微信小程序wepy框架开发资源汇总

    开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序 深大的树洞:基于wepy开发的树洞类微信小程序 wepy-demo-bookmall:微信小程序

随机推荐

  1. SharePoint Caml Query 使用

    需要注意的是: 再使用ListQueryWebPart部件时,默认查看的list列表会出现乱码的情况,需要开启服务器呈现模式,如图: 特此记录一下

  2. kolla-ansible安装openstack(Ocata)

    基本功能部署 基础环境 角色 操作系统 硬件配置 Depoly CentOS 7 Server 磁盘:40GB 内存:8GB 网卡:ens3(内网) ens4(外网) Sched CentOS 7 S ...

  3. 467. Unique Substrings in Wraparound String

    Consider the string s to be the infinite wraparound string of "abcdefghijklmnopqrstuvwxyz" ...

  4. 【Oracle 12c】CUUG OCP认证071考试原题解析(30)

    30.choose the best answer Examine the commands used to create DEPARTMENT_DETAILS and COURSE_DETAILS: ...

  5. “全栈2019”Java第九十七章:在方法中访问局部内部类成员详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. ElasticSearch学习笔记(三)logstash安装和logstash-input-jdbc插件

    ElasticSearch的索引可以手动添加索引的,就是类似下面这样添加的 PUT /movies/movie/1 { "title": "The Godfather&q ...

  7. canvas图像绘制过程中的注意

    特别来记录一下canvas绘制图像,要在图片加载完后,才会将其显示在canvas画布之上,否则会显示不出来:深刻体会,愣是找不到问题... var c=document.getElementById( ...

  8. [CSS3] 各种角度的三角形绘制

    #triangle-up { width:; height:; border-left: 50px solid transparent; border-right: 50px solid transp ...

  9. jmeter结果分析(图形报表和聚合报告)

    采用Jmeter测试工具对web系统作的负载测试,得出的响应报表,数据比较难懂,现作一具体说明.以下是在一次具体负载测试中得出的具体数值,测试线程设置情况为:线程数:200,等待时间(ramp-up) ...

  10. 1.HTML练习(二)

    一.表格练习: 1.<table>标签:声明一个表格,它的常用属性如下: border属性             定义表格的边框,设置值是数值 cellpadding属性     定义单 ...