精华内容
下载资源
问答
  • 微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 ...
  • 1、在HBuilder中引入代码,然后使用快捷键ctrl + r ,点击微信开发者工具; 2、下载并注册微信开发者工具,具体教程可以问度娘; 3、打开微信开发者工具,导入项目中的 unpackage => dsit => dev => map-...

    因为不太熟悉移动端开发,最近在上手小程序开发的时候,遇到一些问题,记录一下。

    首先,技术选型为uniapp,毕竟人家是一套代码,多端运行的嘛,够强大!

     

    1、在HBuilder中引入代码,然后使用快捷键 ctrl + r ,点击微信开发者工具;

    2、下载并注册微信开发者工具,具体教程可以问度娘;

    3、打开微信开发者工具,导入项目中的 unpackage => dsit => dev => map-weixin

    4、项目导进来后,选择 设置 => 安全设置 => 打开服务端口

    5、然后,点击编辑按钮后,就可以在微信开发者工具中运行并调试代码,是不是很简单。

    6、如何想再手机上预览小程序,点击预览,会自动生成二维码,微信扫一扫,就可以实现预览,前提是手机和电脑在同一网段。

     

    结束

    展开全文
  • 微信小程序开发:使用微信开发者工具与Web Service之间通信(已登录为例子)准备创建微信小程序项目微信开发者程序部分创建Web Services服务微信小程序访问Web Service测试 准备 首先下载好微信开发者工具以及VS2017...

    微信小程序开发:使用微信开发者工具与Web Service之间通信(已登录为例子)

    准备

    首先下载好微信开发者工具以及VS2017,注册好账户并在微信开发者工具中申请一个APPID。这一部分步骤网上有很多教程,在这里就不多说了。我这里使用过的服务端是使用的C# 工具为VS2017专业版。

    创建微信小程序项目

    1.打开微信小程序香项目,创建一个微信小程序项目,输入对应的APPID。这一部分的具体操作大家可以参考微信官方的开发文档。
    [外链图片转存失败,源站可能有防盗在这里插入!链机制,建描述]议将图片上https://传(imblogcqnimg.cn/202zIdW10327110544600.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shad0,text_aHR0cHMoLy9ibG9nLmNzZG6ubmV0L8FxXzQyNDkyMjI4,size_13,color_FFFFFF,t_70756)(n)]
    2.创建成功(为了方便我这里使用的是测试号进入的),里面会有一个默认的项目,小伙伴们可以点击运行测试一下是否可以使用。
    创建成功
    3.创建成功后我们先去掉图中选项。
    在这里插入图片描述

    微信开发者程序部分

    1.前面我们已经做好了配置,现在我们写一个简单的登录界面,如下创建相关页面。
    在这里插入图片描述

    2.打开login文件夹选中login.wxml,填写相关的wxml代码,为了方便我这里随便写一下,代码如下:

    <!--pages/login/login.wxml-->
    <view class="container"> 
     <form bindsubmit="formSubmit" bindreset="formReset">
     <view class="login-icon"> 
     </view> 
     <view class="login-from"> 
     <!--账号-->
     <view class="inputView"> 
       <text class="iconfont icon-yonghuming" style="margin-left: 44rpx; "></text>
      <input class="inputText" placeholder="请输入邮箱" bindinput="usernameInput" /> 
     </view> 
     <!--密码-->
     <view class="inputView"> 
      <text class="iconfont icon-mima" style="margin-left: 44rpx; "></text>
      <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" /> 
     </view> 
     <!--按钮-->
     <view class="loginBtnView"> 
      <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录(Login)</button> 
     </view> 
     </view> 
    </form>
    </view>
    

    保存后结果如下:
    在这里插入图片描述

    创建Web Services服务

    1. 这里我们使用经典的web窗体
      在这里插入图片描述
      在这里插入图片描述
    2. 创建成功后我们右键应用添加一个web服务:
      在这里插入图片描述
    3. 去掉图中的注释:
    4. 写一个方法来响应登录请求,我们这里为了方便,展示不连接数据库。用一个函数来模拟一下。代码如下:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    
    namespace WebApplication1
    {
        /// <summary>
        /// login 的摘要说明
        /// </summary>
        [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。 
         [System.Web.Script.Services.ScriptService]
        public class login : System.Web.Services.WebService
        {
    
            [WebMethod]
            public string HelloWorld()
            {
                return "Hello World";
            }
            [WebMethod]
            public string logincheck(string user, string password)
            {
               // linqDataContext db = new linqDataContext();
                int i = login1(user, password);
                //int ii = db.proc_select_isblack(user, 0);
                if (i == 1 )
                {
                    return "ok";
                }
                else
                {
                    return "no";
                }
            }
    
            public int login1(string user,string password)
            {
                if (user == "LX2000" && password == "123456")
                {
                    return 1;
                }
                else
                {
                    return 0;
                }
            }
        }
    }
    
    

    代码中我们可以看到,当用户名是LX2000,密码为123456时,我们认为是运行成功。这里我们在浏览器中检验一下,并记住URL地址:http://localhost:55946/login.asmx
    在这里插入图片描述
    输入相关值可以调用此方法 这里我就不测试了。
    在这里插入图片描述

    微信小程序访问Web Service

    1. 回到微信开发者工具,我们进入app.js文件,在globalData中加入一个全局的字符串globalReqUrl:“https://gjxysie.hbpu.edu.cn/webserver”。在里面的地址就是我们刚刚复制的。由于js中每个请求都会用到此部分连接字符串,因此在在这里设置为全局参数方便以后就行更改。关于IP/域名,微信是有一定的限制的,大家先要了解可以阅读微信开发者文档。
      在这里插入图片描述
      2.阅读最新的开发文档,我们发现微信现在不允许我们向本机的IP发起请求,所以现在我们把刚刚写的webservice通过IIS发布在内网环境下。绑定一个内网IP。发布后浏览器测试一下能不能用内网访问。
      在这里插入图片描述
      3.回到微信开发者工具,修改步骤一中的字符串为:http://192.168.31.59/login.asmx,打开login.js,写入以下代码逻辑:
      在这里插入图片描述

    (1)开头加入const app = getApp();
    (2)在page中的data中初始化参数username和password(如下)
    (3)获取输入框中username和password的值(如下)

      data: {
        username: '',
        password: ''
      },
    // 获取输入账号 
      usernameInput: function (e) {
        this.setData({
          username: e.detail.value
        })
      },
     
      // 获取输入密码 
      passwordInput: function (e) {
        this.setData({
          password: e.detail.value
        })
      },
    
    1. 写入登录执行逻辑:首先我们判断输入是否为空,然后若不为空发起wx.request请求,具体语法参考相关文档。设置请求为POST,使用DATA传入数据,注意这里数据名要和Web Service接口中对应方法要获取的参数名一致。获取返回的请求后做出相应其他的操作。这里的JS引用在前面写wxml时已经添加。所以一共加上前面步骤3中的逻辑完整代码为:
    // pages/login/login.js
    const app = getApp()
     
    Page({
      data: {
        username: '',
        password: ''
      },
     
      onShow: function () {
        // 生命周期函数--监听页面显示
        // wx.hideTabBar({})
      },
      onLoad: function () {
       
      },
     
     
      // 获取输入账号 
      usernameInput: function (e) {
        this.setData({
          username: e.detail.value
        })
      },
     
      // 获取输入密码 
      passwordInput: function (e) {
        this.setData({
          password: e.detail.value
        })
      },
     
      // 登录处理
      login: function () {
        var that = this;
        if (this.data.username.length == 0 || this.data.password.length == 0) {
          wx.showToast({
            title: '账号或密码不能为空',
            icon: 'none',
            duration: 2000
          })
        } else {
          wx.request({
            url: app.globalData.globalReqUrl+'/logincheck', //
            method: 'post',
            data: {
              user:  that.data.username,
              password:  that.data.password
            },
          
            success(res) {
              console.log(res.data);
              if (res.data.d == "ok") {
                wx.showToast({
                  title: '成功登录',
                  icon: 'none',
                  duration: 2000
                });
               
              } else{
                wx.showToast({
                  title: "密码错误",
                  icon: 'none',
                  duration: 2000
              })}
            },
            fail(){
              wx.showToast({
                title: '服务器繁忙,请稍后重试',
                icon: 'none',
                duration: 2000
              })
    
            }
          })
        }
      }
    })
    
    

    测试

    由于限制不能访问本机IP,所以这里我们使用微信开发者工具自带的真机调试功能(手机需要和Web service发布的IIS机器在同一内网环境下)。测试结果如下:
    在这里插入图片描述在这里插入图片描述在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 跟随这个教程,开始你的小程序之旅吧! 二、申请帐号 进入小程序注册页(https://mp.weixin.qq.com/wxopen/waregister?action=step1)根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。 在这...

    一、开始

    开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。

    跟随这个教程,开始你的小程序之旅吧!

    二、申请帐号

    进入小程序注册页 (https://mp.weixin.qq.com/wxopen/waregister?action=step1)根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

     

    在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。

    登录 小程序后台 (https://mp.weixin.qq.com/),第一次登陆需要补填小程序信息才能获取AppID(按指引补填即可)。

    然后我们可以在菜单 “设置”-“基本设置” 尾部看到小程序的 AppID 了 。 

    小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。

    有了小程序帐号之后,我们需要一个工具来开发小程序。

    三、安装开发工具

    前往 开发者工具下载页面 (https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html),根据自己的操作系统下载对应的安装包进行安装【建议选择稳定版】。有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 (https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)。

    打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧! 

    四、你的第一个小程序

    新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,选择“小程序”开发模式、暂不使用云服务、JavaScript语言,点击确定,你就得到了你的第一个小程序了。 

    点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

     

    转载于:https://www.cnblogs.com/Adam-Ye/p/11100870.html

    展开全文
  • 微信手机端调试工具[下载地址] ...如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。2.安装好后,选择移动调试,X5 Blin

    微信手机端调试工具[下载地址]

    (https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html)
    进入后的页面
    这里写图片描述
    这里写图片描述

    注意:

    1.如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。

    2.安装好后,选择移动调试,X5 Blink内核调试,先验证手机是否支持X5 Blink内核调试,如果不支持,找一台支持的手机。
    这里写图片描述
    3.翻墙,用usb线连接移动设备与本机,在手机设置里搜索usb调试,打开usb调试功能,用移动设备扫描以上二维码,勾选信息>TBS setting > 是否打开TBS内核 Inspector调试功能,点击开始调试。
    4.退出微信,从新登录打开微信端的网页后会出现下图(如果未出现,或空白则需要翻墙),点击inspect
    这里写图片描述
    5.现在进入了我们熟悉的chrome调试界面

    这里写图片描述

    展开全文
  • 微信web开发者工具使用教程

    万次阅读 2016-12-13 11:40:16
    即刻下载使用==》微信web开发者工具下载 2、调试微信网页授权,具体操作步骤为: 1)开发者可以在调试器中点击“登录”,使用手机微信扫码登录,从而使用真实的用户身份来开发和调试微信网页授权。请确认手机登录页...
  • 本文为大家介绍一下微信小程序开发者工具版本管理的一些使用方法,结合了笔者的一些使用体验和官方使用文档,致力于方便大家理解使用该项功能。本文编写时笔者使用开发者工具版本为Stable v1.02.1910120.使用本...
  • 本小节我们将介绍微信开发者工具如何使用 同学们可以通过两种方式进入官网,一是直接浏览器输入如下网址;二是通过百度搜索“微信公众平台” 每个小程序都拥有一个身份证号,成为AppID,同学们可以首先...
  • 一年一度的微信小程序开发大赛即将拉开帷幕,在使用微信开发者工具进行多人开发时,代码管理就成了比较棘手的问题。好在,微信开发者工具中集成了Git工具,只需链接到远程仓库,即可轻松协作。 #使用方法 ##安装Git ...
  • 上一篇文章已经运行起了一个uni-app项目的小demo,但是运行在Chrome浏览器的H5页面,那在微信开发者工具中如何实时模拟查看该项目呢? 1.在微信开发者工具中运行 配置小程序IDE相关路径 说明:只有配置了才能在...
  • 首先这个问题是微信开发者工具代理的使用问题,我们要着手通过修改代理配置进行修改,其他网络教程列如修改注册表,重新安装系统、还有修改微信开发者工具配置文件的教程都是乱用药,大家千万不要尝试。 解决方法: ...
  • 今天新弄了个企业微信,在使用微信开发者工具调试的时候,遇到了如下的问题: 在网上找了下教程,发现全都是旧版本的解决方法不适用。这里介绍下新的企业微信的解决方案:1.首先,你必须是这个企业微信的管理员。这...
  • 没办法,现在需要硬着头皮装微信开发者工具。 直接用的github上的一个教程。链接:https://github.com/cytle/wechat_web_devtools 因为我的电脑之前为了装微信和qq,安装过deepin-wine环境,所以在我安装微信...
  • 1)首先,我们访问微信开发者工具下载地址,如下图所示,我们下载稳定版本,按你系统去选择Windows 或者macOS,我这里因为是Windows环境,所以后面教程都是以Windows环境为例,macOS实际使用跟Windows没有太大区别:...
  • 网址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 安装教程:https://jingyan.baidu.com/article/363872ec6296f36e4aa16f74.html 选择稳定版,安装
  • 当时参考的教程(感觉十分详细): 开发|微信小程序与tensorflow.js准备工作 https://www.pianshen.com/article/98001042013/ 错误: 使用tensorflowJS插件出错: thirdScriptError Plugin "tfjsPlugin" has ...
  • 前段时间突发奇想想接触小程序,看了一些视频之后其实主要还是要练手,当然就去官网下载了小程序官方开发工具...(正常主页面长什么样子可以自行百度,网上教程和视频所展示的都是正...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 314
精华内容 125
关键字:

微信开发者工具使用教程