• 一、微信小程序介绍1、什么是微信小程序传说中的微信“应用号”终于要来了,但它的正式名称很有可能是“微信小程序”。那么什么是小程序呢?小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的...

    一、微信小程序介绍

    1、什么是微信小程序

    传说中的微信“应用号”终于要来了,但它的正式名称很有可能是“微信小程序”。那么什么是小程序呢?小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。
    小程序传承了企业号、服务号:触手可得,不用安装,用完即走的优点。小程序的前景是非常不错的,小程序生态很可能成为移动原生生态的下一代替代品。

    2、微信小程序的优点

        触手可得、不用安装、用完即走
    

    3、微信小程序对行业的冲击

    • 原生生态下生存的很多公司的商业模式会受到很大冲击
    • 原生开发、 UI 设计、流量运营这些领域的人的失业率会增加
    • 对浏览器生态也会产生影响

    4、学习微信小程序开发需要具备的基础

    • html、css、js基础
    • ajax基础
    • 简单的面向对象基础

    前面扯了一大通的废话,下面转入正题吧,正式介绍微信小程序开发流程

    二、开发工具下载及安装

    官网地址https://mp.weixin.qq.com/wiki
    注意:打开界面后,点开左侧‘微信公众平台’下拉菜单——>选择‘微信公众平台-小程序’菜单,即可看到小程序开发的相关文档手册的链接
    下载地址https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

    下载完成安装包之后和安装通常的软件一样安装,安装完成后打开开发工具界面如下(下面是我已经创建了一个小demo哦):
    这里写图片描述

    注意:首次打开工具的时候需要扫描二维码来绑定你的微信账号,做过微信开发的都知道,上图的图标就是你的微信图像哦。

    三、微信小程序:Hello World创建

    1、点击’添加项目’菜单弹出具体的添加界面
    这里写图片描述
    AppID:目前没有正式版本,所以选择‘无AppID’,等发布正式版本后可以根据情况修改;如果你有内测邀请,你可以登录:https://mp.weixin.qq.com,在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID;

    项目名称:设置一个本地项目的名称(非小程序名称),比如“我的第一个项目”;

    项目目录:选择一个本地的文件夹作为代码存储的目录。类似于Eclipse的工作空间,用来保存你的项目(注意,小程序创建的时候不会自动生产一个项目文件夹哦,所以要注意了)

    参数设置完成后,点击’添加项目’按钮,即可创建自己的第一个小程序了。
    注意:在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。

    2、项目界面—菜单
    这里写图片描述

    编辑:可以查看和编辑我们的代码
    注意:每次编辑完成后,需要切换到’调试’菜单,然后点击‘重启’功能才能生效哦。

    调试:可以测试代码并模拟小程序在微信客户端效果

    项目:可以发送到手机里预览实际效果(似乎没有内测AppID无法上传手机预览哦)

    四、微信小程序目录结构介绍

    目录介绍看下图及简易结构(建议向创建一个demo,结合demo来看哦):
    这里写图片描述

    详细介绍:

    根目录:
        |-- app.js(必须)           脚本文件,小程序的逻辑文件:定义了一个应用实例,可通过getApp()获取到。
        |                       语法:app(json对象)
        |
        |-- app.json(必须)         公共配置文件,例如配配置导航条样式,底部tab菜单等
        |                    是一个JSON对象,pages属性类似于定义了路由数组,pages的第一个元素表示小程序的首页
        |
        |-- app.wxss         公共样式文件,公共的css文件
        |
        |-- untils           存放公用js文件的文件夹
        |    |
        |    |-- util.js
        |
        |-- pages            页面相关的文件夹名称不能修改
             |
             |-- index       index页面文件夹(注意:为了减少配置项,建议页面文件夹名称和文件夹下的文件名保持一致,且js/wxml/wxss/json四个文件有相同的路由)
                  |
                  |-- index.js(必须)       当前页面对应的js文件,可通过var app = getApp()来获取当前应用实例。
                  |                  语法:Page(json 对象)
                  |
                  |-- index.wxml(必须)
                  |-- index.wxss
    
             |
             |-- logs       logs页面文件夹
                  |
                  |-- logs.js
                  |-- logs.json     logs页面的数据及配置文件
                  |-- logs.wxml     logs页面的页面布局展示文件,相当于html
                  |-- logs.wxss     logs页面的独立样式文件

    建议:查看第四部分项目目录结构是,请先创建一个简单的小程序demo,然后结合实际demo查看,并且根据简易结构中的文字注意,查看没有文件并试着修改看看效果。

    总结:这篇博文前半部分是长见识,后半部分在具体到小程序的开发流程,写的有些简单,有兴趣的可以去看看官网哦,后续我也会进行完善。此外后续的博文将进行一系列的小程序开发的介绍。

    欢迎程序猿小火把的关注和支持,欢迎大家来吐槽哦。我是湖北-我家小菜。

    展开全文
  • 比如微信开发工具安装的位置是:C:\Program Files (x86)\Tencent\wechatdevtool cmd C:\Program Files (x86)\Tencent\wechatdevtool > .\微信开发者工具.exe --disable-gpu 原因是: 新版本默认开启了gpu加速,...

    打开后一直黑屏,登录的码弹框一直黑屏
    在这里插入图片描述
    解决方法

    1. 安装路径有中文。大家可以把路径中的中文去掉,换成英文试试。
    2. 比如微信开发工具安装的位置是:C:\Program Files (x86)\Tencent\wechatdevtool
      cmd C:\Program Files (x86)\Tencent\wechatdevtool >
      .\微信开发者工具.exe --disable-gpu
      在这里插入图片描述
      原因是:
      新版本默认开启了gpu加速,所以–disable-gpu 就可以了。
      启动微信开发者工具后,在项目设置里面 把多核编译勾选去掉。
    展开全文
  • 微信开发工具使用git

    2018-11-16 17:09:29
    1、初始化本地仓库 ...由于是新建项目,并没有初始化过Git仓库,所以项目会提示初始化Git仓库,点击「初始化 Git 仓库」,点击「确认」,...下图为微信Web开发者工具初始化后的版本控制面板。 3、配置仓库信息 初...

    1、初始化本地仓库

    微信Web开发者工具中点击「版本管理」。由于是新建项目,并没有初始化过Git仓库,所以项目会提示初始化Git仓库,点击「初始化 Git 仓库」,点击「确认」,完成本地仓库的初始化。

    这一步骤相当于执行「git init」命令。

    2、初始化完成后,我们可以看到本地的仓库和当前的Git状态。下图为微信Web开发者工具初始化后的版本控制面板。

    3、配置仓库信息

    初始化完成后,依次点击「工作空间」->「设置」->「通用」->「编辑」,编辑在Git中使用的用户名和邮箱。这一步相当于git config命令中的配置操作。

    $ git config --global user.name "用户名"
    $ git config --global user.email "邮箱"

    需要注意的是:此处配置的邮箱名需要和 码云 https://gitee.com 上的邮箱保持一致,才能保证提交后能统计到Git的提交贡献信息。

    4、点击微信号开发工具的项目管理---设置--远程--添加

    5、 设置在码云上创建的项目的名称和克隆地址,点击确定即可

    6、 左侧会出现远程的路径目标

    7、 选择网络认证,认证方式为用户名、密码认证,填写在码云上使用的用户名密码即可

    8、 推送代码到远程仓库

    点击操作面板上的「推送按钮」,在弹出窗口选择「推送到新的远程仓库分支」,名称填写「master」,表示推送到远程仓库的master分支,然后点击「确定」

    9 、修改并提交代码

    点击开发工具面板的「版本管理」按钮,关闭「版本管理」面板,打开「pages/index/index.wxml」,修改其中内容「获取头像昵称」为「我的第一次修改提交」,保存。

    再次切换到「版本管理」面板,可以看到当前本地分支有一个文件等待提交,选中并勾选文件,可以查看当前文件内发生的改动。

     

    在下方提交框填写提交的备注信息,点击「提交」,将代码提交到本地仓库主干分支上。提交后,可以在本地仓库分支上查看提交记录。

     

    接下去我们再次将代码从本地分支推送到远程仓库。点击操作面板上的「推送按钮」,在弹出窗口选择「推送到一下远程仓库分支」,选择一存在的远程master仓库的master分支,然后点击「确定」。

     

    推送完成后,即可在码云对应的仓库主页看到提交的代码变更。

    注意事项:当一个小程序多个人共同开发时,在拉取最新的码云上代码的时候,拉取下来到微信开发工具上,开发工具并不能很好的识别并更新本地代码

    所以这里我们需要用到,git和tortoiseGit管理工具,

    下载下来安装到本地,在本地的工作空间目录生成.git版本库,再进行项目的拉取和推送,码云上的代码会更新到项目的工作空间内,进而更新到微信开发工具内

     

    展开全文
  • 微信开发者工具是必不可少的,因为有些微信封装的方法只有微信开发者工具上才能使用,还有一个重要的原因就是,我们提交我们的代码审核必须通过该工具来提交,所有要做微信小程序和小游戏的开发,这个工具的学习是必...

    如果你要开发自己的微信小程序或者小游戏,微信开发者工具是必不可少的,因为有些微信封装的方法只有微信开发者工具上才能使用,还有一个重要的原因就是,我们提交我们的代码审核必须通过该工具来提交,所有要做微信小程序和小游戏的开发,这个工具的学习是必不可少的。

    老实说该工具不管是对久经沙场的老人还是萌新来说都是非常简单的,能很快上手,并且还是中文的哦,下面我们看看整体界面

    image

    整个编辑器大题分为四块,模拟器编辑器调试器工具栏,下面我们每个模块来独立讲解

    一、模拟器

    模拟器是工具为了让我们的代码达到所见即所得的效果,我们编写的代码效果能很快的在左边的界面上显示出去,做过web开发的小伙伴应该也很清楚,浏览器上按下F12也可以达到类似的效果,其实微信开发工具本身就是对浏览器进行了一定程度的封装,我们使用起来也相对亲切,模拟器还可以模拟不同手机,百分比、网络状态等,极大的方便了我们的开发和测试

    image

    二、编辑器

    编辑器是每个开发工具必不可少的一部分,功能也大同小异,微信开发工具上有新增WXML、WXSS等文件的快捷方式,还是比较方便的,微信小程序采用的是ES6的语法,这个工具的提示确实有些差了,很多时候都不能提示出来,所以有很多人现在会采用WebStorm(前端开发最强神器)编写后在到微信开发工具上提交,当然也会有些坑,后续将专门讲解,不过微信开发工具目前更新速度还是很快的,希望能快点改善智能提示的问题

    三、调试器

    第一眼看到这个调试器有没有一点眼熟,它和浏览器按下F12后几乎是一样的,但是微信工具也做了一些简化和新增,我们主要看看几个不同和比较有用的三个功能

    image

    1、Storage

    Storage可以理解成一个本地存储数据库,可以通过wx.setStorageSync(‘logs’, logs)等方法将我们需要的数据直接存储和取出,有时在开发的过程中是非常有用的,后续将介绍具体使用场景

    2、AppData

    AppData中主要存储了我们在页面上所有用到的变量,这个对于我们开发和调试来说是非常重要的,能通过它快速看到每个值的赋值情况,快速定位问题

    3、Audits

    这个是一个程序性能的分析工具,可以在开发和开发完成后,测试一下,看看我们的程序在那块还需要进行优化,非常方便

    三、工具栏

    工具栏提供了我们一些常用的操作,在此我们也只将一下常用到的,和一些有用的,主要有以下几点

    image

    1、预览

    点击预览按钮后,我们可以用我们的后台绑定的微信扫描,在真机上看具体的效果,因为工具毕竟是模拟器,在模拟器上没问题,而在手机上却存在问题的情况是常有的,所以开发完一个功能后,我们有必要在真机上看看效果

    2、真机调试

    如果在“预览”中发现在真机上有问题,我们可以点击真机调试,我们的手机上也能看到调试信息,非常方便的让我们进行调试真机问题

    3、清缓存

    有时候我们可能用到Storage或者修改了页面和样式等,但是在渲染的时候还是使用的原来的代码,此时清缓存就是非常必要的操作了

    4、上传

    上传是在我们将我们的小程序开发完成后,点击上传,就会将我们的代码提交给微信官方审核了,只有审核通过后,其他用户才能在微信中搜索和使用我们自己开发的小程序

    5、详情

    image

    详情中可以设置项目的一下信息,主要关注开发基础库的选择,版本不要过低或过高,教低的版本会让很多方法无法使用,太高的版本会让很多微信版本较低的用户无法使用你的小程序(当然你可以做兼容处理);开发使用本地的服务时,需要勾选上“不校验本地域名…”,这样小程序就可以调用本地的服务了

    展开全文
  • 例如微信开发工具安装的位置是:f:\Program Files (x86)\Tencent\微信web开发者工具 cmd: f:\Program Files (x86)\Tencent\微信web开发者工具>.\微信开发者工具.exe --disable-gpu 原因是: 新版本默认开启了...

    在这里插入图片描述

    例如微信开发工具安装的位置是:f:\Program Files (x86)\Tencent\微信web开发者工具
    cmd:
    f:\Program Files (x86)\Tencent\微信web开发者工具>.\微信开发者工具.exe --disable-gpu
    在这里插入图片描述

    原因是:
    新版本默认开启了gpu加速,所以–disable-gpu 就可以了。
    启动微信开发者工具后,在项目设置里面 把多核编译勾选去掉。

    解决了困扰多时的问题

    展开全文
  • 微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 ...
  • 1.在Hbuilder X里选择微信开发工具的自定义安装位置 2.打开微信开发工具,设置->代理设置 服务端口开启即可 3.在Hbuilder X里选择 微信小程序运行就可以自动调用微信开发工具 ...
  • 微信开发本地调试工具(模拟微信客户端)开源免费微信管家系统(java)源码下载微信部署需要依靠80端口,如何快速有效的调试本地微信开发程序,捷微团队(jeewx-java微信开源系统),采用微信开发调试工具,供本地...
  • 首先下载官方最新版本开发工具 appid注册自行百度,开发者工具也有提示
  • title: 微信开发者工具–码云项目的导入 date: 2020-05-04 21:37:11 tags: 小程序 第一步: -打开开发者工具,新建项目,填写项目名称,例:demo -选择一个空目录存放此项目 -填写小程序的AppID(在微信公众平台...
  • 进入微信开发工具后,发现需要使用新的版本工具 - “工蜂”,在这之前公司用的 GitLab 搭建的服务器,本以为有什么不同,但是忘记了是 TX 的!!!咳咳,不难发现,这是微信开发工具有意推广 TX ...
  • 微信开发者工具 项目目录结构 目录结构 |---主目录(项目描述文件) | |---app.js 主逻辑文件 | |---app.json 主配置文件 | |---app.wxss 主样式表 |---子目录(页面描述文件) | |---index.js 分支页面逻辑文件 | |...
  • 因为是别的小伙伴的项目,所以,要换一个appID,可以换成自己的,HbuilderX运行在微信开发者工具,打不开,只会跳转到导入项目界面,不会打开这个项目,报错: 解决方法: 然后,关闭微信开发者工具,在...
  • 上一篇文章中https://blog.csdn.net/u014650759/article/details/90701866,我们已经安装好了微信开发者工具,并导入了一个Demo项目,这篇文章,将就开发者工具进行简单的介绍,方便你开发实用编译器,更好的开发小...
  • Mpvue的简单介绍以及开发时踩到的一些坑 微信开发者工具不支持打开vue文件,因为微信开发者工具只是一个用户代理(即显示网站用),类似chorme浏览器一样。 由于官方的微信开发者工具编辑mpvue不是很友好,所以编写的...
  • 当你下载完wepy案例之后,发现并不能够直接导入微信开发工具中查看,出现的情况如下图所示: 我在网上找了许多解决方案,忙活了一个上午之后终于找到一个完全可以用的链接,里面写得很详细,一步步操作就可以,写...
  • 一、前言 这次的项目主要是关于微信公众号的一个开发,本人这次分配的模块是后台微信公众号的支付和退款,第一次接触微信公众的项目刚开始一脸懵逼,开发过程中遇到各种坑,所以想自己写一篇详细的关于微信公众号的...
  • 一、背景:微信开发其实跟web开发并没有太大的分别,在我们进行微信开发的时候,需要调用微信接口的时候(比如获取地理位置,上传图片,拍照等),肯定是需要在微信上操作的,而这时候我们的项目没有部署到生产上...
  • 官方给的文档中,微信开发者工具编辑器兼容了部分 VS Code 扩展插件,可以使用VS Code软件里面的插件。 具体操作教程如下: 一.打开用户目录下,在/.vscode/extensions 下找到其已解包的扩展文件夹 二.点击 [编辑] ...
  • 相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间...(一)微信开发...
1 2 3 4 5 ... 20
收藏数 80,994
精华内容 32,397