精华内容
下载资源
问答
  • 微信小程序调试

    2020-12-22 16:58:12
    微信小程序已经推出很久了,最近开始有时间捣鼓一下,由于从来没有写过任何前端代码,所以这篇博文也是总结自己摸索调研的过程,希望对像我一样前端0经验的同学有所帮助。1. 环境小程序发布流程如下图:小程序发布...

    微信小程序已经推出很久了,最近开始有时间捣鼓一下,由于从来没有写过任何前端代码,所以这篇博文也是总结自己摸索调研的过程,希望对像我一样前端0经验的同学有所帮助。

    1. 环境

    小程序发布流程如下图:

    小程序发布流程

    1.1 微信认证

    根据用户不同需求, 对注册要求也不同:企业开发者, 有企业注册相关信息, 可负担500注册费用, 为了小程序能发布上线;

    公司不给钱程序员, 有企业注册信息, 不想支付费用, 为了技术储备;

    没钱瞎捣鼓程序员, 无企业注册相关信息, 不想支付费用, 为了技术储备;

    类型1\2的用户, 首先需要一个非绑定个人帐号的邮箱在微信公众平台上注册, 注册步骤可参考官方文档,类型选择企业类型, 需要填写企业名称和营业执照注册号等. 由于运行到真机需要app id, 可选择微信支付300的选项, 但暂不支付。

    类型3的用户只能下载微信web开发者IDE, 通过模拟器开发体验无app id功能受限的小程序.用于注册小程序的企业帐号可添加个人帐号为管理员, 管理员可邀请10个开发者帐号, 并且每个企业帐号有一个app id; 开发者可通过微信IDE和app id进行开发和真机调试; 如果涉及网络请求, 还需要在小程序后台配置服务器域名, 如下图:

    配置服务器

    1.2 小程序开发工具

    微信提供了微信web开发者工具作为官方IDE, 可以在此下载官方IDE

    可在此下载demo体验, 填写app id后通过官方IDE打开即可看到界面如下图,

    IDE

    1.2.2 webstorm

    由于官方IDE代码补全和体验不是很好, 例如每打开一个文件就新开一个tab\背景色无法调等等, 强迫症开发者可以选择使用webstorm作为IDE+微信IDE只作为模拟器.webstorm还有很多感人的小细节, 比如hex颜色可以在左侧预览.

    webstorm hex

    2. 社区资源汇总

    微信公众平台 官方的;

    github 微信小程序开发资源汇总 这个比较全;

    豆瓣电影demo 我学习小程序参考的demo;

    像我一样前端0基础的同学可以先大体看一下官方平台上的简易教程\ 框架\ 组件\ API\ 工具的介绍, 对整体有个基本的概念, 然后再从demo入手, 一边研究别人的demo 一边写自己的demo, 遇到不会的问题寻求搜索引擎和社区的帮助.

    3. 框架

    由于官方文档已经有框架等的介绍, 我这里通过自己的理解总结一下, 看到这的同学如果还没读官方文档可以先看一下我的理解, 后续再自己摸索时形成自己的理解.

    3.1 简介

    通过官方demo可以看到根文件夹就是项目名, 其下有pages文件夹, 这下面存放各个业务模块, 每个业务模块创建单独的一个pages的子文件夹, 例如子文佳名称为component_one, 该文件夹下的.js.json.wxml.wxss也需要以component为前缀.如下图, 红框文件夹对应第二个tab的功能, 绿框文件夹对应第一个tab的功能, 蓝框中文件命名不可改变, 是全局性的.

    框架示例

    pages文件夹名和app.js\json\wxss命名的来头官方解释为: 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

    通过上面的表, 可以看出, 全局性的app.js\ app.json是必须的, 局部的.js.wxml是必须的. 如果代码量比较小, 类似豆瓣电影demo, 可以把所有样式表都写在app.wxss中, 但还是推荐根据业务区分, 写到各自业务的wxss中.pages中的json\wxss会覆盖app.json\app.wxss中相同的配置项, 若page缺少某个选填文件类型, 则该页面直接使用app对应的配置.

    3.2 mvc角度

    从MVC的角度来看, js就是controller, json是逻辑配置文件, wxml是只有UI控件的view, wxss是只配置view中各控件具体样式的配置文件.

    3.3 各类型文件都干了什么

    3.3.1 app.js

    App()是小程序的生命周期方法, 可根据小程序生命周期的各个阶段进行业务逻辑, 还可以在这里设置全局变量.

    app.js

    3.3.2 app.json

    app.json

    对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等.pages[]中index=0的元素为小程序打开时默认展示的页面.还可以在此打开debug功能.

    3.3.3 app.wxss

    app.wxss

    app.wxss用于设置全局样式, .xxx对应.wxml中相应UI控件所对应的class名.

    app.wxml

    4.1 js

    项目中与业务紧密相关的模块作为components放在pages下, 业务间通用的模块放到IDK下, 与业务无关的放到IDP下.

    模块化-代码结构

    若pages中的类B引用IDK中的类A, 可如下在类B中创建一个A的实例, 并在类B的Page()方法中引用.var aObj = require('../../IDK/A.js')

    4.2 wxss

    公用的UI控件样式可写到app.wxss中, 例如loading控件等; 只与page相关的UI样式可写到各page对应的wxss中.

    wxss模块化

    5. 写demo过程总结

    由于是前端小白, 写demo时是面向官方文档编程&面向百度\面向谷歌\面向stackoverflow编程...遇到问题边查边解决, 最终解决各种问题诞生出demo小崽子时是非常有成就感的哈. 下面将我在写demo中遇到的一些场景总结一下.

    5.1 涉及到的应用场景

    5.1.1 点击事件

    点击事件

    bindTap="响应点击事件的方法名"

    5.1.2 滚动视图

    scroll-view

    < scroll-view>

    scroll-y 纵向滚动

    bindScroll="监听滚动事件的方法名"

    5.1.3 列表数据绑定

    < block wx:for-items="{{数据源们}}" wx:for-item="一个数据"> 绑定数据源;

    5.1.4 网络请求

    可用微信小程序API发送get\post请求,

    wx.request

    也可用fetch.then

    fetch-then

    5.2 遇到的坑

    5.2.1 模拟器上看不到图片

    微信小程序bug, 模拟器上有时图片被拦截无法显示

    5.2.2 真机网络请求数据为空

    需要在小程序运营配置平台中配置请求域名, 并需要交500注册费之后才可以支持真机网络请求.

    应用场景杂谈

    微信官方对小程序的定位是——微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。所以对比公众号,小程序更像局限在微信中的一个插件。总体看起来, 如果是工具类创业型项目, 例如宠物医院\家政服务\买火车票等等, 还是比较适合不单独做一个APP, 而是借助微信生态圈的; 但如果是类似百度\阿里等互联网公司, 微信小程序的闭塞性还是无法当做一个导流工具的, 而且由于其API是有很多微信定制性, 无法完整移植现有的H5代码, 也会产生一定学习和开发成本.对小程序应用性感兴趣的同学也可以看上面第2部分"社区资源"中相关的新闻和评论分析, 比我写的好的多, 我就只谈自己的观点, 不做搬运了.

    展开全文
  • 1、找到C:\Users\用户名\AppData\Local\微信开发者工具\User Data里面的WeappPlugin文件夹,把整个文件夹删掉再重启微信小程序即可。 2、1往往删掉了文件夹之后再重启工具就又出现了,所以还是解决不了,那就把...

    问题:

    关闭调试器之后再点击调试器控制台没有任何内容显示,即使重启开发者工具也还是没有用的情况。

    解决办法:

    1、找到C:\Users\用户名\AppData\Local\微信开发者工具\User Data里面的WeappPlugin文件夹,把整个文件夹删掉再重启微信小程序即可。

    2、1往往删掉了文件夹之后再重启工具就又出现了,所以还是解决不了,那就把开发者工具卸了重装,注意装的要是稳定版的!重装之后就可以啦。

    展开全文
  • 微信小程序调试工具

    2021-03-28 11:23:09
    js签名调试 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 调试公众号页面,也就是微信浏览器的页面 微信开发工具->更换开发模式->公众号网页调试

    js签名调试

    https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
    

    调试公众号页面,也就是微信浏览器的页面

    微信开发工具->更换开发模式->公众号网页调试
    
    展开全文
  • 每次保存编译后就弹出paused in debugger 这种情况很可能是不小心点到了,点掉下面这个就不会了

    每次保存编译后就弹出paused in debugger
    在这里插入图片描述

    这种情况很可能是不小心点到了,点掉下面这个就不会了
    在这里插入图片描述

    展开全文
  • 实习进入公司微信小程序第一个项目在调试过程中发现页面加载不出来,问题显示: module "components/form-box/date/miniprogram-computed.js" is not defined 百度搜索了一下,看到社区里面这条解决方案: 关于使用...
  • 文章目录可以新增一个模式,然后为该模式指定一个页面进行编译调试可以修改已有模式,重新指定页面 可以新增一个模式,然后为该模式指定一个页面进行编译调试 可以修改已有模式,重新指定页面 ...
  • 微信小程序真机调试

    千次阅读 2020-12-29 23:45:41
    微信小游戏在发布前,我们需要安装真机运行并且查看追踪其运行Log日志,以便查询排除隐藏的错误。那么如何通过微信开发者工具实现真机调试呢? 1.点击微信开发工具的真机调试按钮,成功的话会生成二维码 有时候...
  • 程序调试主要有三大功能区:模拟器、调试工具和小程序操作区模拟器模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。编译代码点击工具左下角的编译按钮,可以...
  • 微信小程序本地调试的问题,因为需要https,所以请求起来比较麻烦,后来问身边的人才发现了最简单的解决办法!!!所以这里直接推荐大家来了解一下。5块钱就能搞定! 内网穿透 通过内网穿透工具可以直接将请求...
  • (2) 对该项目进行配置:找到工具-》设置,在设置中找到如下选项,并填写微信小程序开发工具的执行文件路径。 (3)登录网址:微信公众平台 申请appId,然后将该appid配置到项目中,如下: (4)打开微信小...
  • 微信小程序发布调试

    2021-01-15 14:11:19
    最近做了一个小程序项目发布有感而发,从测试到上线一路坎坷,功能做完了,也发布版本了,但是接口就是不通讯,终于从坑里面出来了,记录一下我的发布过程 平时我们开发的这个没有用到域名,所以要勾选不校验...
  • 微信小程序支付(已调试通过) 1.安装证书 解压后找到apiclient_cert.p12 双击apiclient_cert.p12 ,输入密钥。 不知道密钥的话,可以尝试输入商户号 2.支付调试中出现的问题 在idea中打开项目 1.将appid、mch_id、...
  • 思路 因为之前是能看到的 所以对比了一下最近两个版本的代码 发现主要写了keyframe动画 注释掉后发现就能看到了 解决方法 把keyframe相关的css先注释掉 其他 可能还有其他的原因共同导致的,如果大家有其他的方法或...
  • 一般来说,如果不涉及到后端数据,我们通过微信小成开发工具预览功能是可以直观看到项目的情况的,但是一旦涉及到后端本地服务器数据,预览是无法获取到的,而真机调试得按下面操作才能实现 通过win + r 打开命令行工具,...
  • 如何获取、调试微信小程序生成的带参二维码?
  • 首先第一点,需要确保真机调试微信用于权限。 第二点,确保手机和开发者工具在同一个局域网。 第三点,真机调试的时候,微信开发者工具里面不能用localhost代表本地IP,要用具体的IP。 第三点,真机调试的时候,...
  • 做了个优惠券功能,需要对优惠券进行金额和时间排序,但是微信开发者工具和真机调试都没问题。一发布体验版,就只剩下金额排序生效了,时间排序的程序看起来压根就没有执行。 二,原因 ios手机的时间处理格式得是...
  • 注册小程序账号 官网: https://mp.weixin.qq.com/ 无账号, 可以先注册账号 有账号 , 账号密码或者扫码登录 新建项目的时候需要填写一个appID, 可以在开发管理里面找到 AppID 上线 在版本管理中进行版本管理...
  • 微信小程序 体验版开启调试模式

    千次阅读 2021-04-29 15:31:32
  • 在wxml里面使用了navigator来控制跳转,在微信开发者工具里能正确跳转,但是在真机调试时点击却无反应 原因及办法 navigator 对应的 url 必须配置在app.json的pages中,否则无法跳转。所以解决办法就是在app.json -&...
  • 微信小程序的页面中,web-view内嵌了另一个页面url,但该调试页面的时候发现看不到console.log值,以及其他调试信息。 解决方案: 在微信开发者工具模拟器页面的底栏,有个眼睛图标,旁边有个"..."的按钮,点开...
  • 今天突然发现怎么调试的,没去看官方怎么说明。...在红点上鼠标右击,选择【同步断点到内置浏览器】就可以愉快地开始调试啦! 顺带说一句,CSDN是瞧不起Hbuilder么,文章标签都没有。。。 ...
  • 微信开发者工具,在模拟器界面上,点击模拟区域任意地方,先左键点击一下,再右键点击一下,在模拟器左上角会出现一个“调试”的按钮。
  • 今天做微信小程序,用真机调试了两三次以后就提示 官方给出的答案是: 重启一下开发工具以及微信小程序或者电脑,若还是不可以过一段时间再重试一下 官方链接: ...commentid=00048a83ea41087cbd3bcfaa4510 ...
  • uniapp 微信小程序 真机调试接口数据问题 问题描述:电脑本地的微信开发者工具有数据而真机调试后访问不到后台数据接口。 问题解决:配置的后台服务器接口地址改成本机的ip地址+端口号,并且电脑与手机在同一网络下...
  • 微信小程序踩坑日记-微信小程序首次加载样式错乱问题 在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移、错乱等问题 问题原因:-未知(估计是组件的问题) ↓ 解决办法:...
  • 如果在开发者工具能加载出来,在真机上显示不了。 可能是因为图片用了中文名字。
  • background-image背景图真机调试显示不出来 原代码(背景图和image图片真机调试显示不出来): <view class="header" style="background-image: url( '../../../../static/images/home/homeHeaderBg.png')"> ...
  • 微信小程序默认创建的应用,点击用户头像,会显示log日志,日志存储在Storage中,key值是logs,value值是Array数组,数组的长度为8 二 logs日志分析 2.1 读取logs日志并追加(app.js) onLaunch() { // 展示本地...
  • 小程序的appId,必须换成自己的,别人的appId,通不过。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,517
精华内容 17,006
关键字:

微信小程序调试

微信小程序 订阅
友情链接: absensi.zip