• 最近刚刚学完JavaScript的基本知识,忍不住也开始尝试一下微信小程序开发,对于官方提供的微信web开发者工具也是信心十足,但是实际操作中还是遇到了一些坑,对于像我一样的一个初学者,比如在该工具中创建项目后,...

    从9月份微信小程序横空出世到现在的将近三个月,虽然尚未全面开放,却已红透大半边天,网友们贡献的各种资源教程也喷涌而出。

    最近刚刚学完JavaScript的基本知识,忍不住也开始尝试一下微信小程序开发,对于官方提供的微信web开发者工具也是信心十足,但是实际操作中还是遇到了一些坑,对于像我一样的一个初学者,比如在该工具中创建项目后,存放各个页面的文件夹默认为pages,但是想把它改成其他名字,结果会出现不同的问题,下面分享自己是如何爬这个坑的,懂得的大神请忽略。

    首先,现在下来最新的开发工具微信web开发者工具v0.11.112301,打开新建一个快速启动项目test,稍微改一下页面内容,只保留logs页面,效果和文件树如下所示:


    由于某种原因,现在我需要更改pages文件夹名称,当然app.json里面对应的页面路径也要同步更改。

    1,先更改文件树文件夹名称为pagestest,移开鼠标焦点点击空白处(此处若不移开鼠标焦点直接保存结果不会改变),保存(会出现报错一次),再更改app.json中的页面路径为"pagestest/logs/logs" 保存,显示效果正常为;

    2,先更改app.json中的页面路径为"pagestest /logs/logs" 保存,页面显示pagestest/logs/logs.wxml,再更改文件树种的文件夹名称为pagestest保存,此时pagestest文件夹中又出现了另外一个文件夹pages,而且显示仍然是pagestest/logs/logs.wxml,而这个pages文件夹中也有一个logs文件夹,与原文件夹内容一样。

    删除这个后来生成的pages文件夹,保存,此时的页面才显示出Hello World。有时删除pages后还不能正常显示,需要进入logs的wxml页面置入鼠标焦点,无需改变内容,保存一下即可。

    另外,自己在尝试时也遇到过其他的情况:

    1.生成的多余的页面文件夹也可能在于app.js同一层的位置;

    2.更改后页面内容还是不能正常显示,这时进入wxml文件看一下内容,发现原本的文件内容变成了路径,所以删除文件后来生成的文件之前先看一下页面内容是否还存在。

     

    综上所述,微信官方的开发者工具在用户体验上还是存在这个欠缺的,期待官方后面版本的更加人性化,

    对于出现诸如以上问题,除了按方法1更改之外,当然一次性建好页面文件夹名称不再更改是最好的办法,如何无法确定后面是否需要更改,则可以用第三方编辑器比如sublime text进行代码变,可以在官方开发工具中查看效果,从而避免出现以上问题。

    展开全文
  • 通过 Vue.js 命令行工具 vue-cli,你只需在终端窗口输入几条简单命令,即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目: 全局安装 vue-cli $ npm install –global vue-cli 创建...
  • 1.微信小程序开发者工具 ...小程序原生开发:直接使用小程序开发者工具打开项目即可 小程序框架开发:首选官方提供类vue.js开发框架 wepy.js ,备选 mpVue。我们选择的是 wepy PS:mpvue尤大大亲自点赞,目前...
  • 前言 由于项目需要,最近开始了微信小程序开发的学习,从官方的开发工具开始。微信小程序无论是从开发难度还是从便捷性上来讲都是不错的选择,而且...开发者工具 系统:win7及以上版本 工具 安装和建立工程都很...
  • 功能点:页面跳转 本文基于微信小程序公测版,IDE:微信开发者工具 0.11.122100
  • 一般我们使用微信的时候都不会特意修改浏览器,所以如果不做处理的话,微信打开网页上的图 片一般是无法点开的。要想点开微信打开网页上的图片,就要调用微信的内置私有接口 WeixinJSBridge 中的图片查看器的...
  • 微信小程序实现图片轮播 2018-10-13 22:18:30
    wxml页面代码: <!--图片轮播 --> <view class='swipercontainer'> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"... vertic
  • 通过 Vue.js 命令行工具 vue-cli,你只需在终端窗口输入几条简单命令,即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目: # 全局安装 vue-cli $ npm install --global vue-cli...
  • 微信小程序开发:学习笔记[1]——Hello World 快速开始 1.前往微信公众平台下载微信开发者工具。...打开微信开发者工具,选择新建小程序项目,我们先不需理解AppID的概念,新建项目时选择无AppID,...
  • 相信做过微信小程序的都知道,官方给出的微信web开发工具上根本就无法加载node_modules包,即使可以加载,node_modules动辄几十M的大小,小程序的代码限制在1M以内,微信小程序的三个不足: 1无法调用npm包 2无法...
  • 微信开发者文档中有较详细的 Android 系统的调试方式,这里笔者记录一下 IOS系统的调试流程 Android调试文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140 IOS调试: 手机上本来...
  • 微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维。 api提示不全,要一个个查api啊,写代码超级慢啊 很多必备的快捷键都...
  • 新手入门,大神勿喷。。。。 渲染小程序的前端页面入门步骤(非云开发项目) ...3.在Wechat Development Code目录下新建一个文件夹存放静态资源(图标、图片等) 4.新建的页面会有四个文件 :一...
  • (7)开发工具设置 WXSS简介 简介: WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。 对比: WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS...
  • 效果: 新加页面,app.json中新添一个login文件夹 login.wxml ...view class='allcon'>...swiper style="height:400rpx" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{2000}}" duratio...
  • 1.错误示例 location /MP_verify_fMqnKV8Yx7l6SWF6.txt { root /home/resouce/MP_verify_fMqnKV8Yx7l6SWF6...以上错误,在同一目录/home下,访问index.html是正常的,但是对静态文件却报404.notfound错误, 2.错...
  • 小程序初始化的源码中,赋予显示的标题默认设置为 “WeChat“,显然根据业务需求,一定会要求我们可自定义的 下面是实现这个小需求的两种方法 ... 静态标题栏,json文件操作 ②. 动态标题栏,js 文件操作
  • search.wxml <view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon> <input type="text" confirm-type="se...
  • 刚接触小程序不久,感觉相对来说比较简单,就自己花了五六天做了一个项目,因为本身也是米粉,就看中了小米的微信小程序(可怜国庆撸了几天的代码,哈哈),话不多说,先上效果图吧。 算了算了。本来还打算上gif图,...
  • 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hello World的微信小程序,并讲解了这个自动生成的微信小程序的视图开发原理。 这个系列的下一步,会继续介绍这个微信小程序的控制器...
1 2 3 4 5 ... 20
收藏数 13,296
精华内容 5,318