• 一、微信小程序web开发工具下载地址 1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目 2.1 微信小程序web开发工具需要扫码登陆,所以必须...

    一、微信小程序web开发工具下载地址


    1.1 在微信公众平台-小程序里边去下载开发工具下载地址


    1.2 下载后安装一下就可以使用了:


    二、创建项目


    2.1 微信小程序web开发工具需要扫码登陆,所以必须先绑定开发者才可以:



    2.2 已经绑定的开发者可以创建项目,需要填写AppID、项目名称、本地开发目录。





    AppID需要去设置里边获取,如果不填的话官方给的提示是部分功能受限:




    三、开发工具界面介绍:





    1. 编辑:开发的时候,需要到编辑区去写代码 

    2. 调试:开发完需要调试程序的时候需要切换到这个区域,调试区有很多工具可供使用。

    3. 项目:在这里可以上传或者预览项目

    4. 编译:就相当于运行项目的意思

    5. 关闭:关闭当前工程

    6. 微信小程序web开发工具提供实时预览的功能,界面的效果会在这个区域显示

    7. 这个区域可以看到整个项目的文档目录结构

    8. 这个区域是编码区

    9. 这里是选择屏幕尺寸的地方

    10. 模拟网络环境:2G/3G/4G/WiFi



    四、调试区六大工具介绍:


    在调试区开发工具提供了6种调试模式:


    4.1 Console

    Console的意思是控制台,做过开发的都知道几乎每个IDE都会有控制台,可以显示错误信息和打印变量的信息等。


     

    4.2 Sources

    Sources显示了当前项目的所有脚本文件,微信小程序框架会对这些脚本文件进行编译。

    Source下边还有一个区域,做过软件开发的都知道,一般下边是控制台会显示一些log信息、断电调试等等。



    4.3 Network

    Network顾名思义:这个区域显示的是与网络相关的信息,我这里暂时没有进行网络请求。



    4.4 Storage

    官方的解释是显示当前项目的使用wx.setStorage或者wx.setStorageSync后的数据存储情况。这个后续用到再慢慢研究


     

    4.5 AppData

    AppData是显示当前项目显示的具体数据,可以在这里编译,并且会在页面实时显示。



    4.6 Wxml


    Wxml调试区:把他的名字换一下的话大家就好理解了,其实他的实质就是HTML+CSS,微信只是把HTML改成了Wxml而已。学过HTML的人一看就明白,左侧的区域是HTML语言+CSS的一些标签属性。右侧可以便捷的设置CSS的属性。




    转自:http://lib.csdn.net/article/5/52864?knId=1796#focustext


    展开全文
  • 进入微信开发工具后,发现需要使用新的版本工具 - “工蜂”,在这之前公司用的 GitLab 搭建的服务器,本以为有什么不同,但是忘记了是 TX 的!!!咳咳,不难发现,这是微信开发工具有意推广 TX ...

    写在之前:

    由于业务扩展,公司需要开发小程序,之前在做RN开发,才结束,就得边学边维护。

    但是,有东西学,当然是好的,正所谓工欲善其事必先利其器,开发一个新项目之前,版本管理工具可是第一位。

    进入微信开发工具后,发现需要使用新的版本工具 - “工蜂”,在这之前公司用的 GitLab 搭建的服务器,本以为有什么不同,但是忘记了是 TX 的!!!咳咳,不难发现,这是微信开发工具有意推广 TX 的工蜂,其实也大同小异。

    题外,工蜂?真的把我们程序猿当做蜜蜂了啊?啊,喂!

    注:阅读之前,需要有git的相关操作以及机器安装Git。(补课传送门:https://git-scm.com/book/zh/v2


    机器环境:

    1. Mac 10.13.3
    2. Git version 2.10.1

    步骤说明:

    1. 需要登录工蜂平台(当蜜蜂传送门:https://git.code.tencent.com/users/sign_in),注册账户。
    2. 配置账户信息。
    3. 创建项目及分支。
    4. 微信开发工具配置。
    5. 拉取项目,提交合并测试。

    以上五步,第一步进入自行注册即可,剩下四步。那么,废话不多说,let's go.


    二,配置账户信息

    登录后,点击【个人设置】配置好用户名及昵称后,在【密码设置】里配置好密码。

     


    三,创建项目及分支

     

    点击【返回个人中心】

     

     

    右上角【创建项目】

     

     

    在【新建项目】时,可以对项目名称进行命名,路径也就是项目名称啦。

     

    这样,我们的项目版本库就创建好啦,当然,有的同学会问了,我的版本库是空的,那我下载什么?根据下面的提示,进入项目文件夹,比如使用微信开发工具新建了一个小程序的Project,那么进入该文件夹下,根据提示【创建一个新的版本库】进行操作即可。

    四,微信开发工具配置。

    使用微信开发工具打开项目,注意版本。

    点击版本管理。

    以下是基本的 git 操作以及分支的展示。【确实界面很简洁,看起来很舒服,但是,换成中文,竟然有一点不适应。】

    接下来,点击【设置】->【网络和认证】,对账户进行配置,也就是刚才工蜂上面填写的。

    配置完成啦。

    注:如果需从git上拉取别的新项目,需使用git命令拉取项目到文件夹之后,再使用微信开发工具打开进行如上操作即可。

    git clone "url"

    五,拉取项目,提交合并测试。

    点击拉取,选择分支以及合并方式即可拉取该分支下的更新。

    出现这个小勾,则表示拉取成功啦,在【历史】一栏中可以查看。

     


    附加步骤:

    什么?为什么还会有附加步骤,说好的五步走呢?

    哈哈哈哈,打不过我吧,啦啦啦啦啦啦啦啦~各位忘了,第一步不是注册账户吗,抵消抵消~

    咳咳,言归正传,通常 Gitmaster 分支,是对外发布的主要稳定版本,也就是生产版本。所以,需要新建一个自己的分支对项目进行操作。

    此外,需要一个 develop 分支来对大家开发的代码进行合并,之后在上线的时候,推送到 master 分支。

    master 分支的 bug ,切一个新分支【命名为 master + 预计发布日期 如 master20181212 】出来进行修改,而新功能则在 develop 上继续开发。详细传送门:http://blog.jobbole.com/109466/)。

    所以,我们现在需要新建一个自己的分支来供自己提交代码,上述大概的流程是:

    提交并推送到【自己的分支】->合并推送到【 develop 分支】->合并推送到【 master 分支】


    话不多说,开搞开搞。

    点击【项目】,然后找到刚才初始化后的项目点击进入:

    点击【分支】即可查看当前项目下拥有的分支

    这里已经有了两个分支,一个是 master ,一个是我自己创建的分支,点击右上角【创建分支】,进行新分支创建。

    输入新分支的名称,以及分支的来源(from)

    创建好之后,在微信开发工具中进行相应操作。

    点击【分支】即可新建一个本地分支

    选择基于哪个分支创建,这里命名需和远程新建的一样

    创建好之后,点击抓取

    这样,我们本地有了新建的分支,远程也有了新建的分支。那么新建的分支提交并推送代码后,点击【合并】,比如我A分支提交推送后,本地检出(check out)master分支,然后合并本地的A分支,在点击推送。这样,远程的A和master分支都有了更新的代码,其他伙伴更新分支,即可下载到你提交的代码。


    好了,就先写到这儿,可能说得有点快,有不详细获取错误的地方,欢迎指出。当然,有什么不明白也可以留言交流。


    不知道我有没有写得通俗易懂,如果觉得哪步有疑惑,可以留言,欢迎指出不足。

    下面是我自己搞的一个公众号,分享讨论交流技术~,也可以解答一些你遇到的问题,给我留言就行。

    感谢 Thanks♪(・ω・)ノ。

    展开全文
  • 一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,...

    一、微信小程序web开发工具下载地址

     

    1.1 在微信公众平台-小程序里边去下载开发工具下载地址

    1.2 下载后安装一下就可以使用了:

    二、创建项目

     

    2.1 微信小程序web开发工具需要扫码登陆,所以必须先绑定开发者才可以:

     

    2.2 已经绑定的开发者可以创建项目,需要填写AppID、项目名称、本地开发目录。

     

     

    AppID需要去设置里边获取,如果不填的话官方给的提示是部分功能受限:

     

     

     

    三、开发工具界面介绍:

     

     

     

    1. 编辑:开发的时候,需要到编辑区去写代码 

    2. 调试:开发完需要调试程序的时候需要切换到这个区域,调试区有很多工具可供使用。

    3. 项目:在这里可以上传或者预览项目

    4. 编译:就相当于运行项目的意思

    5. 关闭:关闭当前工程

    6. 微信小程序web开发工具提供实时预览的功能,界面的效果会在这个区域显示

    7. 这个区域可以看到整个项目的文档目录结构

    8. 这个区域是编码区

    9. 这里是选择屏幕尺寸的地方

    10. 模拟网络环境:2G/3G/4G/WiFi

     

     

     

    四、调试区六大工具介绍:

     

    在调试区开发工具提供了6种调试模式:

     

    4.1 Console

    Console的意思是控制台,做过开发的都知道几乎每个IDE都会有控制台,可以显示错误信息和打印变量的信息等。

     

    4.2 Sources

    Sources显示了当前项目的所有脚本文件,微信小程序框架会对这些脚本文件进行编译。

    Source下边还有一个区域,做过软件开发的都知道,一般下边是控制台会显示一些log信息、断电调试等等。

     

    4.3 Network

    Network顾名思义:这个区域显示的是与网络相关的信息,我这里暂时没有进行网络请求。

     

    4.4 Storage

    官方的解释是显示当前项目的使用wx.setStorage或者wx.setStorageSync后的数据存储情况。这个后续用到再慢慢研究

     

    4.5 AppData

    AppData是显示当前项目显示的具体数据,可以在这里编译,并且会在页面实时显示。

     

    4.6 Wxml

     

    Wxml调试区:把他的名字换一下的话大家就好理解了,其实他的实质就是HTML+CSS,微信只是把HTML改成了Wxml而已。学过HTML的人一看就明白,左侧的区域是HTML语言+CSS的一些标签属性。右侧可以便捷的设置CSS的属性。

     

     

    转自:http://lib.csdn.NET/article/5/52864?knId=1796#focustext

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

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

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

    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

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

    展开全文
  • 【重点】page对应的main.js配置: import Vue from 'mpvue'; import Person from './person.vue'; import store from '@/store'; const app = new Vue({ ...Person, ... 第一次用Mpvue编写微信小...

     【重点】page对应的main.js配置:

    import Vue from 'mpvue';
    import Person from './person.vue';
    import store from '@/store';
    
    const app = new Vue({
      ...Person,
      store
    });
    app.$mount();

     问题:

       第一次用Mpvue编写微信小程序,配置Vuex时发现mapGetters映射无法识别。

       参考了网上现有的资料:解决mpvue + vuex开发微信小程序,vuex辅助函数mapState,mapGetters不可用问题

     详解:

       问题是解决了,但是拥有强迫症的我无法容忍如此“不美丽”的解决方案,经过测试发信是vuex的配置问题:

       app.vue的main.js

    import Vue from 'mpvue';
    import App from './App';
    import store from './store';
    import api from 'common/js/api';
    Vue.config.productionTip = false;
    Vue.prototype.$api = api;
    App.mpType = 'app';
    
    const app = new Vue({
      ...App,
      store
    });
    app.$mount();
    
    ...
    ...

      沿袭VUE的vuex的配置,VUE中的vuex一般配置到app.vue的main.js下,其他组件可以轻松通过mapGetters,mapActions等映射访问存储的属性和方法,每个组件中不需要再次配置,(新手一枚,核心原理恕不能详解)

    而mpvue中由于微信小程序的工程结构,加入了网页,将小程序的每个页面单独抽离,渲染相应页面时需要在对应的main.js中配置(原谅我的无知,目前只知道这种方式)

    网页目录

    如果你在app.vue的main.js中配置了vuex,尝试过的话,在app.vue里面是可以正常使用mapGetters,mapActions等映射关系的,在某个页面里面却出现mapGetters映射无法识别,mapActions是正常的,原因就是相应的main.js中未配置

    解决方法

    例如需要在person.vue中使用mapGetters,mapActions等映射关系:

    如图1所示,需要在person.vue对应的main.js配置

    import Vue from 'mpvue';
    import Person from './person.vue';
    import store from '@/store';
    
    const app = new Vue({
      ...Person,
      store
    });
    app.$mount();
    

    2,计算出映射mapGetters等:

    <script type="text/ecmascript-6">
      import {mapGetters, mapActions} from 'vuex';
      export default{
        computed: {
          ...mapGetters([
            'userinfo'
          ])
        },
        mounted() {
          console.log('person:->>userinfo', this.userinfo);
        },
        methods: {
          ...mapActions([
            'setUserInfo'
          ])
        }
      };
    </script>

    3,测试

    测试

    2018-10-12最新补充:

    最近发现相关BUG,某个Pages下的页面按照这种方法配置过VueX之后,在微信开发者工具中,dist目录下开发者工具无法编译生成对应页面的wxml文件,原因是不识别以下写法,

    const app = new Vue({
      ...Person,
      store
    });

    这种写法是我参照app.vue 的main.js的写法,当然具体应该是webpack的配置问题,鉴于笔者对Node.js 以及webpack的配置了解不多,相关配置测试还没有测试出来,先用一种“笨”方法解决这个Bug,

    解决方式:

    先改成原本常规写法:

    import Vue from 'mpvue';
    import Person from './person.vue';
    const app = new Vue(Person);
    app.$mount();
    

    然后打开微信开发者工具编译,dist目录下就可以生成相应的wxml文件,然后再修改main.js便可解决此Bug

    展开全文
  • 一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,所以必须...
  • 工具栏 人头像-个人中心:展示小程序系统版本更新后的一个推送消息。方便的切换小程序账号 头像旁边的3个按钮,我们可以点击他们去控制相应的模块的显示或隐藏 普通编译:我们可以选择添加编译模式自定义编译...
  • 1.基础知识在上一篇有讲解和图片,内容大致包括微信开发者模式后台配置、微信公众开发者文档代码详解。2.本篇将粘贴出包括所有类型在内的消息处理办法,在开发者模式下用代码完成所有编辑模式的基础内容。3.本篇代码...
  • 做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了。闲话不多说,我们先...
  • 前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装。   你的第一个小游戏 新建项目选择小程序项目,选择代码存放的硬盘路径。 目前小游戏不提供公开注册,可点击体验小游戏使用无 AppID ...
  • 微信开发工具下载:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html?t=1474644083132 微信开发API说明:https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=201715 微信开发API组件说明:...
  • 代码状态 Status Code: 远程地址 Remote Address: 引用协议 用于过滤 Referrer 报头内容,目前是一个候选标准,不过已经有部分浏览器支持该标准。 Referrer Policy: Response Headers响应包头 接受范围 A...
  • 1:PC桌面打开微信小程序开发工具微信web开发者工具),如图1所示:  图1 2: 用微信扫描图1中的二维码
  • project.config.json:微信开发者工具的配置信息 app.js:帮助我们去注册一个微信小程序的应用 app.json:微信小程序的一个全局配置 app.wxss:设置微信小程序全局的一些样式 pages:存放的是小程序的所有界面,...
  • 1.微信公众平台官方代码可以到这里下载:http://mp.weixin.qq.com/wiki/4/2ccadaef44fe1e4b0322355c2312bfa8.html 2.这里把它粘贴出来,以注释的形式进行讲解。 3.首先我们要知道一些基础的知识: (1)要有自己的...
1 2 3 4 5 ... 20
收藏数 8,963
精华内容 3,585