安装好 微信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. Android 如何查看源码 (eclipse 按住 ctrl )

    首先要确认 Android SDK Manager 下载并安装了 sources.然后在代码中按住 ctrl 在点一个类名, 如果打开的页面是找不到源码,就点那个按钮,然后找到源码所在的文件夹,就可以 ...

  2. css--一些基本属性

    关于css各标签的属性: w3cschool一应俱全 设置固定的图片: body { background-image: url(bgimage.gif); background-attachment ...

  3. qi zi

    #include<stdio.h> ]; ][]; int N; typedef struct node{ int x; }node; node dui[]; int se(int a) ...

  4. LOJ#2882. 「JOISC 2014 Day4」两个人的星座(计算几何)

    题面 传送门 题解 我们发现如果两个三角形相离,那么这两个三角形一定存在两条公切线 那么我们可以\(O(n^2)\)枚举其中一条公切线,然后可以暴力\(O(n^3)\)计算 怎么优化呢?我们可以枚举一 ...

  5. HTTP请求报文支持的各种方法

    常见的HTTP方法如下: 1.GET GET是最常用的方法.通常用于请求服务器发送某个资源. 2.HEAD HEAD与GET的行为类似,但服务器在响应中只返回首部,不会返回实体的部分.这就允许客户端在 ...

  6. 玩PHP必了解的PHP常用符号和函数

    原文:http://y312ff.blog.163.com/blog/static/12701109420119119575812/ 近在写PHP程序的时候发现了一些特殊的PHP符号,例如连续小于符号 ...

  7. LG的nexus5(32GB版本 - 821)-TOT-底包 可用于救砖!

    LG的nexus5(32GB版本 - 821)-TOT-底包 底层修复效果完美,通过LGflashTool1.8直接刷进去就行~ 底包下载: https://pan.baidu.com/s/1Z5WD ...

  8. linux查看python安装位置

    1, import sys print sys.path 即可打印所有python路径.   2, 执行命令whereis python即可显示出python相关的所有的路径,包括可执行文件路径,安装 ...

  9. 2016级算法期末上机-H.难题·AlvinZH's Fight with DDLs III

    1119 AlvinZH's Fight with DDLs III 思路 难题,最小点覆盖. 分析题意,某一个任务,既可以在笔记本A的 \(a\) 模式下完成,也可以在笔记本B的 \(b\) 模式下 ...

  10. localStorage注册页面A注册数据在本地储存并在B页面打开

    如题目的这么一个问题, A页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...