微信开发者工具新建page_微信开发者工具如何新建page - CSDN
  • 由于一个项目会有很多的页面,并且微信小程序建一个一面又需要有4个对应文件,所以这里我会讲到一个小技巧,怎么快速新建page. 在app.json全局配置的路由pages里面直接添加你要新加的page路径,如 “pages/set/set”,...

    由于一个项目会有很多的页面,并且微信小程序建一个一面又需要有4个对应文件,所以这里我会讲到一个小技巧,怎么快速新建page.
    在app.json全局配置的路由pages里面直接添加你要新加的page路径,如 “pages/set/set”,然后Ctrl+s保存一下,就会看到小程序目录中新增了set目录,同时也包括相应的文件,如图
    这里写图片描述

    展开全文
  • 在教程之中,新建了一个空白项目后,进去项目,根目录下新建了一个app.json文件,然后新建了一个pages目录,pages目录下新建了一个home目录,最后在home目录下,点击新建page,page名为home,新建之后则会自动在home...

    最近开始学习上了微信小程序开发,网上找了一个教程来学习,结果刚开始学习就掉进了坑里。

    在教程之中,新建了一个空白项目后,进去项目,根目录下新建了一个app.json文件,然后新建了一个pages目录,pages目录下新建了一个home目录,最后在home目录下,点击新建page,page名为home,新建之后则会自动在home目录下生成home.js,home.json,home.wxml以及home.wxss四个文件。

     

    然而,然后当我在home目录下点击了新建page,输入名称之后,却没有任何反应,home目录下没有新建成功任何文件,也没有任何报错。我反复对照教程看了n遍,发现自己的操作也并没有任何问题,但这个问题却始终存在。我甚至一直以为这是软件bug,去找来了老版本开发者工具安装依旧无法解决……

     

    最后,终于发现了这个坑的原因。教程之中使用的web开发者工具大概是0.17版本(如果没记错的话应该是2017年的产物),而现在都是2019年了,我使用的微信web开发者工具为1.02版本。这个新建page后会自动生成四个相应文件的操作在老版本中是可以实现的,但在目前的1.02版本中,要想实现这个自动创建功能,还得在根目录下app.json文件中创建一个pages的json数组

    就像图中这样创建完json数组之后,我们再返回home目录下创建page,名为home,这样一来home.js,home.json,home.wxml以及home.wxss四个文件就自动生成了,并且还会在app.json中自动填入相关信息。

     

     

     

     

    这一个坑让我掉进去了1个多小时,实在心累,分享给各个和我一样的新手,免得有人同样被坑。

     

    展开全文
  • 打开微信开发者工具 创建第一个小程序 步骤: 打开微信开发者工具 使用微信扫码登录 点击小程序-创建小程序 项目名 项目路径 appid 不使用云服务器 语言: javascript...

     打开微信开发者工具 创建第一个小程序

    • 步骤:

      • 打开微信开发者工具

      • 使用微信扫码登录

      • 点击小程序-创建小程序

        • 项目名

        • 项目路径

        • appid

        • 不使用云服务器

        • 语言: javascript

     截图如下:

     

    微信开发者开发工具的组成

    • 菜单栏

    • 工具栏

      • 预览

        • 描述二维码

        • 自动预览

      • 切后台

    • 模拟器

    • 编译器

    • 调试器

     目录结构:

        

     

    1.项目结构

    • 对比:

      • web页面:

        • 技术栈:

          • html

            • 从语义化的角度来描述页面结构

          • css

            • 从审美的角度来美化页面

          • js

            • 从交互的角度来提升用户体验

      • 小程序页面

        • 技术栈:

          • wxml

            • 描述微信页面的结构

          • wxss

            • 描述微信页面的样式

          • js

            • 书写微信的逻辑代码

          • json

            • 配置页面的相关信息

    • 组成

      • pages:管理当前小程序中所有的页面

        • index

          • index.wml

          • index.js

            • 注意点:

              • 所有的代码都是写在

                Page({
                 
                })
          • index.wxss

          • index.json

            • 注意点:

              • 如果没有内容,必须添加一个空对象

      • app.json:注册小程序中的页面

    • 小技巧
      • 快速创建一个页面

        • 在 app.json 中的 pages 下添加一个路径,直接保存,可以自动生成对应的页面

      • 设置项目的默认首页

        • 在 app.json 中的 pages 将路径移到第一个元素中










    转载于:https://www.cnblogs.com/KoBe-bk/p/11423765.html

    展开全文
  • 在我们下载微信开发者工具后,打开工具,第一次需要扫码登录,登录后,如下图,选择新建一个小程序 我的这个是新建了一个的了,点击加号新建,然后填入信息,项目名称,项目存储的地址,以及注册小程序时的APPID,...

    在我们下载微信开发者工具后,打开工具,第一次需要扫码登录,登录后,如下图,选择新建一个小程序
    在这里插入图片描述
    我的这个是新建了一个的了,点击加号新建,然后填入信息,项目名称,项目存储的地址,以及注册小程序时的APPID,再选择不使用云服务,语言选择默认的JavaScript
    在这里插入图片描述
    看一下创建好了的小程序的所有文件夹下面的文件是什么。如下图:
    在这里插入图片描述


    文件都看过了,接下来就是文件下面的内容了,首先是app.json 全局入口文件 下面是直接生成的代码。
    app.json是当前⼩程序的全局配置,包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。普通快速启动项⽬⾥边的app.json配置

    {
      "pages": [
        "pages/index/index",
        "pages/logs/logs"       
        //该项目的俩个字段表示里面有俩个页面,分别是首页和日志文件,可以在此字段当中添加其目录或者文件。
      ],
      "window": {
        "backgroundTextStyle": "light",   			// 下拉
        "navigationBarBackgroundColor": "#fff",  	//导航栏的背景颜色
        "navigationBarTitleText": "WeChat",  		//导航栏的标题
        "navigationBarTextStyle": "black"  			//文字颜色,只能定义为黑色和白色 black white
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }
    

    1.pages pages 字段⽤于描述当前⼩程序所有⻚⾯路径,这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。
    2.window window 字段定义⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊定义等
    window的属性挺多的,在该页面浏览:单击跳转
    3 tabber属性:定义导航栏属性,页面路径,文字等等,以及color颜色,selectedColor选中后的字体颜色,属性详情:单击跳转

      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "主页",
          "iconPath": "icon/_home.png",
          "selectedIconPath": "icon/home.png"
        },
        {
          "pagePath": "pages/img/img",
          "text": "图片",
          "iconPath": "icon/_img.png",
          "selectedIconPath": "icon/img.png"
        }
        ],
        "color":"#0099ff",
        "selectedColor": "#000000"
      },
    

    在通过使用tabber属性添加导航后,我们可以看到在添加后与很多小程序多差不多了,在下方有一个图片加文字的导航。如下图所示:
    在这里插入图片描述


    其次就是页面配置文件 page.json
    在其他的.json文件当中,比如在index.json页面当中,在原本的基础上加上属性会对页面外观进行部分改变,代码如下:
    除去原有的第一行,给主页面加上了背景色和文字的属性。

    {
      "usingComponents": {},
      "navigationBarBackgroundColor": "#0099aa",
      "navigationBarTitleText": "主页"
    }
    

    微信索引配置文件 sitemap.json
    在该文件下会给出一个网址,该网址会直接指向微信官方的文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html


    展开全文
  • 安装了之后,除了刚安装完可以自动打开后续无论是用快捷方式,还是跑到文件目录里,都无法打开这个磨人的小家伙其实解决这个问题很简单,只需要使用你的管理员权限便可轻松打开微信Web开发者工具。 1、第一步,右键...

    2016年底,微信小程序正式上线。


    很多人和我一样开始对这个新兴的东西产生了兴趣,但许多人却遇到了这样一个问题,安装了之后,除了刚安装完可以自动打开

    安装完成

    后续无论是用快捷方式,还是跑到文件目录里,都无法打开这个磨人的小家伙

    快捷方式

    其实解决这个问题很简单,只需要使用你的管理员权限便可轻松打开微信Web开发者工具。



    • 1、第一步,右键点击你的微信Web开发工具,选择属性。

    属性


    • 2、第二步,到兼容性选项卡中。勾选以管理员身份运行此程序。

    勾选以管理员身份运行此程序


    • 3、接着,选择确定保存你的设置。再次打开时,就成功了。

    主页面


    而它的桌面快捷方式也多了一个小盾牌,代表以管理员身份运行。

    快捷方式


    如有缺漏之处或者可以完善的地方,欢迎朋友们参与交流


    欢迎各位大大互fo, 这里是YCaptain71


    展开全文
  • 1.微信开发者工具自行到网上下载即可 2.打开微信开发者工具,如图所示: 点击创建后,如下图所示:
  • 微信小程序 #开发者工具 无法 在 资源管理器中 #右键 #新建page 的问题。 初学者怎么解决呢,建议尝试在设置(setting)_通用设置 _中更改语言,一般有“系统语言”、“简体中文”、”English“三个,我原来是系统...
  • 最近刚刚学完JavaScript的基本知识,忍不住也开始尝试一下微信小程序开发,对于官方提供的微信web开发者工具也是信心十足,但是实际操作中还是遇到了一些坑,对于像我一样的一个初学者,比如在该工具中创建项目后,...
  • 微信开发者工具&WXML+WXSS学习笔记 by wyc 小程序下载以及使用 浏览器搜索微信小程序api即可找到官网 在设置/外观设置 中可以调整开发者工具的颜色以及主题,推荐深色,搭配浅色的语法高亮 文件介绍 pages、app...
  • 我们每次一个新页面时,都需要手动的新建一个目录+4个文件(即目录、js文件、wxml文件、wxss文件、json文件),这是相当麻烦的事儿。这里告诉大家一个一次创建4个页面文件的小技巧。  如果app.json文件下pages数组...
  • 开发微信小程序并不是很难,网上有很多小程序开发资料,尤其是微信官方的《小程序开发指南》最详细。 下面是我开发小程序的历程: 第一步,请前往...第二步,打开微信开发者工具,选择新建小程序项目。...
  • 参考教材:《微信小程序开发入门与实践》 雷磊 前置知识:JavaScript,CSS 前言 到目前为止,我们把数据都写在了wxml文件里,这是非常不好的编码方式。在真实的项目里,通常是把业务数据放在服务器,然后小程序通过...
  • 微信小程序概述 小程序介绍 微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用。小程序和微信原生功能应用在本质上都是——Web App 小程序优势 微信有海量用户,依赖性很强,微信...
  • 一、简介:微信小程序自动化框架 Python 版 -- Minium 之前有项目一直做APP UI自动化,用的appium,后来项目增加了小程序,使用appium来做小程序自动化的话会遇到很多问题,比如元素定位只能根据xpath来定位,为了...
  • 微信小程序开发 :目录无法自动生成page文件 解决方法:在左侧目录处右键-新建目录-(在新建成功的文件夹中)右键-新建page 就可以啦
  • 如下图,在使用微信开发者工具过程中,新创建了页面目录,想要页面文件夹中自动生成四个基本文件   但是新创建了一个页面文件夹,里面的四个基本文件并没有展示出来 然后在app.json添加这个路径,ctrl+s 保存 ...
  • 在我们新建文件的时候总是要手动挨个创建js,json,wxml,wxss文件,确实是个体力活,有什么办法可以偷懒呢。。。腾讯也考虑到这个问题了,只要我们在app.json的page中定义好路径,随后便会自动帮我们生成以上四件套了...
  • 目录 Demo最终效果 开发工具: 开发步骤: 第一步:准备工作,用visual studio写后台...刚自己做了一个开发微信小程序的Demo,怕忘了,记录下来。希望以后会跳过那些大坑~~ Demo最终效果 开发工具: ...
  • 创建报错pages/module/module.js 出现脚本错误或者未正确调用 Page()     解决方法: 在js文件中添加 Page({ })  
  • 微信小程序之电商平台的构建@前端 这是我在学校没事看看到的一个关于用微信小程序开发开发一个电商平台的视频,然后觉得很有意思,就跟着人家视频里面的教程慢慢做出的一个小程序。以下是我的总结。 工具以及准备 ...
1 2 3 4 5 ... 20
收藏数 2,548
精华内容 1,019
关键字:

微信开发者工具新建page