安装好 微信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. JavaScript多个h5播放器video,点击一个播放其他暂停

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JSP(汇聚页)

    JSP(汇聚页) ------------------------------------------------------------------------------------------- ...

  3. spring包下载方法

    http://blog.csdn.net/liangtiaoxian/article/details/52780747 https://jingyan.baidu.com/article/2fb0ba ...

  4. javascript简要笔记

      零. 数据   0. 变量 分为字符串,数字,undefined, null,对象 undefined类型是只声明了变量,但是没赋值 可以使用typeof()函数来查看变量类型   例子1 var ...

  5. GCD 使用若干注意事项

    这篇文章写的是看完 WWDC 17 - Modernizing GCD Usage 之后的笔记. 一.Parallelism & Concurrency Parallelism 指的是在多个 ...

  6. 微信小程序富文本编辑,Thinkphp5.1

    内容很简单,代码做了注释可以看一下 主要是把 文本 标题 标题颜色  图片 赋值到数组内, 举例: { pic: "/Share/image/images/bgqq_01.png" ...

  7. Java实现BF算法

    package 串的算法; public class BF { public static void main(String[] args) { String a = "aaabbaaacc ...

  8. iOS11 & iPhone X 适配指南

    苹果WWDC开发者大会上,终于发布了大家期待已久的iOS 11,有些新特性功能确实出人意料.不过大的方面苹果貌似也就 AR 和 GM 机器学习了,9月13日凌晨1点,苹果开了新品发布会,相信大家都已经 ...

  9. JS实现值复制

    在JS中对象一般都是传地址,后续修改也会影响原始数据.例如这样. var a={ b:"b" }; var c=a; c.b="c"; console.log( ...

  10. Mac OS 10.12使用SecureCRT 8.1.4无法保存密码的问题解决

    参考上图取消Use Keychain即可. 参考: https://jingyan.baidu.com/article/915fc414fda5fb51394b20bd.html