2018-05-25 11:50:03 one_girl 阅读数 4529
  • 微信小程序开发培训教程

    微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。课程共有7节,通过对小程序的IDE开发工具学习,它的代码结构讲解和一些小程序示例讲解,对小程序开发有一个系统的学习

    458 人正在学习 去看看 梁亿

由于项目出了点问题报错了,开发者工具里的代码模块不显示了
解决办法:
在控制台输入openVendor()
在弹出的文件夹里,清除里面的wcsc wcsc.exe
然后重启开发者工具

——完美解决

2016-10-13 09:54:46 qq_31383345 阅读数 27108
  • 微信小程序开发培训教程

    微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。课程共有7节,通过对小程序的IDE开发工具学习,它的代码结构讲解和一些小程序示例讲解,对小程序开发有一个系统的学习

    458 人正在学习 去看看 梁亿

微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看.

我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化.



现在貌似不能修改.如果有同学找到修改的方法,麻烦告诉我.谢谢.

微信小程序代码编辑快捷键

常用快捷键

格式调整

  • Ctrl+S:保存文件
  • Ctrl+[, Ctrl+]:代码行缩进
  • Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
  • Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
  • Shift+Alt+F:代码格式化
  • Alt+Up,Alt+Down:上下移动一行
  • Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
  • Ctrl+Shift+Enter:在当前行上方插入一行

光标相关

  • Ctrl+End:移动到文件结尾
  • Ctrl+Home:移动到文件开头
  • Ctrl+i:选中当前行
  • Shift+End:选择从光标到行尾
  • Shift+Home:选择从行首到光标处
  • Ctrl+Shift+L:选中所有匹配
  • Ctrl+D:选中匹配
  • Ctrl+U:光标回退

界面相关

  • Ctrl + \:隐藏侧边栏


2018-12-20 11:32:37 weixin_44185377 阅读数 1545
  • 微信小程序开发培训教程

    微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。课程共有7节,通过对小程序的IDE开发工具学习,它的代码结构讲解和一些小程序示例讲解,对小程序开发有一个系统的学习

    458 人正在学习 去看看 梁亿

微信开发者工具调试微信网页授权,点击‘登录’按钮无效

问题描述

h5页面需要获取微信用户信息,参考 微信开发者文档,一步步走到用开发者工具调试页面,却发现点击登录按钮没有反应!如下
微信授权页面
看日志信息
在这里插入图片描述
好吧,说这个图片路径是http,而应该是https,可是这是微信自己的页面啊,怎么改???
然鹅不是这个原因,偶然发现点击按钮上边缘是有效的,点击之后重定向页面,跟文档描述的一模一样。为什么点击上边缘有效,而点击按钮无效?如果你也是这样,那么请打开电脑设置—字体大小–看看是不是125%???
现在,把字体设置成100%,重新打开微信开发者工具,再去调试上面的页面,你会惊喜地发现,点按钮可以了。

原因

电脑设置的字体大小(非100%)的时候,会影响微信开发者工具dom节点事件绑定的位置,根据表现来看,并不影响渲染。

补充一下

过程中call_me_small_pure的博客 给了很大帮助,感谢!

2019-07-28 15:56:36 qq_42286669 阅读数 20
  • 微信小程序开发培训教程

    微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。课程共有7节,通过对小程序的IDE开发工具学习,它的代码结构讲解和一些小程序示例讲解,对小程序开发有一个系统的学习

    458 人正在学习 去看看 梁亿

我将持续在近期博客中更新我所总结的微信小程序知识,都是根据书本和个人经验总结的,作为一种记录,也希望能对其他人有点帮助。

1.调试器区域工具

  1. Console窗口:用来显示小程序的错误输入信息和调试代码
  2. Sources窗口:用于显示当前项目的脚本文件
  3. Network窗口:用来观察发送的请求和调用文件的信息,包括文件名称、路径、大小、调用的状态、时间等
  4. Storage窗口:用于显示当前项目,使用wx.setStorage或者wx.setStorageSync后的数据存储情况
  5. AppData窗口:用于显示当前项目当前时刻的具体数据,实时地反馈项目数据情况。用户可以在此编辑数据,并及时地反馈到界面上。

2.微信小程序开发原理

  1. 在js文件里面进行业务逻辑的处理,动态地提供数据:逻辑层语言
  2. 在wxml文件里绑定数据,渲染界面:视图层描述语言
  3. 在wxss文件里添加样式,美化界面:视图样式

3.微信小程序目录介绍
微信小程序目录介绍
(1)框架全局文件:
app.js:必需,作用是装载小程序逻辑
app,json:必需,作用是装载小程序公共设置
app.wxss:非必需,作用是装载小程序公共样式
project.config.json:必需,作用是装载小程序项目个性化配置

//1 app.js小程序逻辑

App({
  onLaunch: function () {//生命周期函数
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({//登陆操作
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({  // 获取用户信息
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {// 定义全局数据
    userInfo: null
  }
})

//2 app.json的5个功能
app.json的5个功能
1.配置页面路径:页面路径定义了一个数组,存放多个页面的访问路径,它是进行页面访问的必要条件。

2.配置窗口表现:用于配置小程序的状态栏、导航条、标题和窗口背景色
1) 可以设置导航条背景色 navigationBarBackgroundColor
2) 设置导航条文字 navigationBarTitleText
3) 设置导航条文字颜色 navigationBarTextColor
4) 设置是否下拉刷新 enablePullDownRefresh
5) 设置窗口的背景色 backgroundColor
6) 设置下拉背景字体或者loading样式 backgroundTextStyle

3.配置标签导航:需要在app.json里面配置tabBar属性,可以配置标签导航文字的默认颜色、选中颜色,标签导航背景颜色以及上边框颜色(black/white)

4.配置网络超时:可以配置网络请求、文件上传、文件下载时最大的请求时间,超过这个时间,则不再请求。

5.配置debug模式:配置debug模式可以方便微信小程序开发程序

//3 app.wxss小程序公共样式表
与css基本兼容,但是形成了自己的风格,可以定义一个全局样式,只要页面有全局样式里的class,就可以渲染全局样式里的效果,但如果页面又重新定义了这个class样式,则会把全局的覆盖掉,使用自己的样式。

//4 project.config.json小程序项目个性化配置文件
用户在工具上做的任何配置都会写入这个文件,以便重新安装程序或者更换计算机时开发者工具恢复到开发项目时的个性化配置,包括编辑器的颜色、代码上传自动压缩等一系列选项。

(2)工具类文件:

utils文件夹:用来存放工具栏的js函数,例如可以设置一些日期格式化的函数、时间格式化等的函数等一些常用的函数。
定义完这些函数后,要通过module.exports将定义的函数名称注册进来,在其他的页面才可以使用。

(3)框架页面文件:

框架页面文件由5个文件组成

  1. logs.js页面逻辑:必填,作用是页面逻辑
  2. logs.json页面配置:非必填,作用是页面配置
  3. logs.wxml页面结构:必填,作用是页面结构
  4. logs.wxs小程序脚本语言:非必填,作用是小程序脚本语言
  5. logs.wxss页面样式表:非必填,作用是页面样式表

(4).js文件中的Page详解

Page({
  data: {//0001提供数据源motto,data数据可以动态绑定到WXML页面中
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

(4.1)页面初始化数据:
data为页面初始化数据,初始化数据将作为页面的第一次渲染。data会为以json的形式由逻辑层传至渲染层,所以数据必须是可以转成json的格式:字符串、数字、布尔值、对象或数组。渲染界面可以通过wxml对数据进行绑定。

(4.2)生命周期函数:
onLoad页面加载:一个页面只会调用一次,接受页面参数可以获取wx.navigateTo和wx.redirectTo及中的query。
onShow页面显示:每次打开页面都会调用一次。
onReady页面初次渲染完成:一个页面只会调用一次,代表页面已经准备妥当
onHide页面隐藏:当调用navigateTo或底部tab切换调用
onUnload页面卸载:当调用redirectTo或navigateBack的时候调用

(4.3)页面相关事件处理函数:
onPullDownRefresh下拉刷新:监视用户下拉刷新事件,需要在config的window选项中开启enablePullDownRefresh。

onShareAppMassage用户分享:只会定义了此事件处理函数,右上角菜单才会显示“分享”钮,用户点击后会调用此函数,此事件需要返回一个Object参数,用于自定义分享内容Object参数说明如下:
title:分享标题(当前小程序名称)
desc:分享描述(当前小程序描述)
path:分享路径(当前页面path,必须是以/开头的完整路径)

onShareAppMassage: function(){
    return{
      title:'自定义标题',
      desc:'自定义描述',
      path:'/page/user?id=123'
    }
  }

(4.4)页面路由管理:
微信小程序的页面路径都是由微信小程序框架来管理的,框架以栈的形式维护了所有页面。栈:后进先出,只能在一端进行插入和删除操作。

(4.5)自定义函数:
例如:

<view bintap=”clickMe”>click Me</view>

Page({
	clickMe:function(){
	Console.log(‘view tap’)
}
})

(4.6) setData设值函数:
Page.prototype.setData()设置函数用于将数据从逻辑层发送到视图层,同时改变对应的this.data的值。
setData()参数格式:接受一个对象,以key,value的形式表示出将this.data的key对应的值改变成value。

2019-07-23 19:56:48 weixin_38131507 阅读数 133
  • 微信小程序开发培训教程

    微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。课程共有7节,通过对小程序的IDE开发工具学习,它的代码结构讲解和一些小程序示例讲解,对小程序开发有一个系统的学习

    458 人正在学习 去看看 梁亿

微信开发者工具-调试器

调试器常用的 6 大功能模块有:Console、Sources、Network、Appdata、Storage、Wxml

Console

Console有两大功能:
1)开发者可以在此输入和调试代码
在这里插入图片描述

2)小程序的错误输出,会显示在此处
在这里插入图片描述

Sources

Sources 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sources 中开发者看到的文件是经过处理之后的脚本文件,开发者的代码都会被包裹在 define 函数中,并且对于 Page 代码,在尾部会有 require 的主动调用。
小程序编译出错时,点击错误,可以跳转到这里,方便查错(黄色背景处为出错处)
在这里插入图片描述

Network

Network 用于观察和显示 request 和 socket 的请求情况
点击Headers可以查看请求数据,点击Preview和Response可以查看响应数据
在这里插入图片描述

Appdata

Appdata 用于显示当前项目当前时刻 appdata 具体数据,实时地反馈项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。
在这里插入图片描述

Storage

Storage 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。
在这里插入图片描述

Wxml

Wxml用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性,同时可以通过修改对应 wxss 属性,在模拟器中实时看到修改的情况。通过调试模块左上角的选择器,还可以快速找到页面中组件对应的 wxml 代码。
在这里插入图片描述

没有更多推荐了,返回首页