开发微信小程序入门前

2024-06-22 05:08
文章标签 程序 微信 开发 门前

本文主要是介绍开发微信小程序入门前,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

2016年09月21日晚 微信发不了微信“小程序”的内测版,一时间整个互联网都炸了锅。个大新闻、论坛都在讨论这个事情。


作为互联网的一猿,我们怎能不紧跟时代的脚步。于是第二天上午也对微信发布的“小程序” 进一步的做了相关了解。


很多人问我这是什么?


我一般回答:这是未来。


安装教程
关于使用教程网上已经有非常多的教程了,我在这里也不过多赘述,就简单的介绍一下。


想要快速的学习及开发微信的“小程序”(虽然它还没正式发布)我们首先需要一个“微信web开发着工具”这么一个软件,windows版与Mac版都有。注意,是0.9及以上的版本,0.7版本无法运行。


Mac版下载地址:wechat_web_devtools_0.9.092100.dmg windows下载地址:wechat_web_devtools_0.9.092100_x64.exe


Mac的安装方式很简单,与普通应用的安装方式一样。


打开下载好用dmg文件


把"微信web开发者工具"拖进Application就算是安装完成了


依次打开"系统便好设置"->"安全与隐私"->"点按锁按钮以进行更改"->选择"任何来源"


根据提示点"是"、"打开" 然后就可以正常的打开应用了


以下是截图:


微信,WEB,小程序

微信,WEB,小程序


先用自己的开发者账号扫一下二维码登陆“微信开web发者工具”,登陆成功后会出现一下界面:

微信,WEB,小程序



(我已经添加过了,所以不用在意这些细节)


点击“添加项目”


这是会提示输入AppId、项目名称、及项目地址, 如下图


微信,WEB,小程序


什么是AppID?
注意:这里的App ID不是原来开发者帐号的那个App ID。


众所周知,腾讯只给发了200个开发者账号,那像咱们这种没有资格的怎么办?


我们是猿诶,在不影响他人利益的情况下当然选择破解。


题外话:
听说开发者帐号已经吵到300万了,不知道是真的还是假的!


1、每个用户只能有20个“小程序”
2、“小程序”不能打开第三方应用
3、每个应用开发完后打包提交给微信进行审核
4、应用是在微信的服务器的
5、无法独立出一个独立的应用,只能在微信上使用


然后点"添加项目"就完成了一个项目的创建。

微信,WEB,小程序



破解方法


windows与mac的破解方法基本相同,这里只以mac为例


先关闭开发者工具


下载这两个JS文件,分别替换各个目录中的文件


文件1: createstep.js 文件2: projectStores.js


替换的路径


createstep.js -> /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/components/create/createstep.js
projectStores.js -> /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/stroes/projectStores.js


替换完后启动应用,然后输入App ID(随便输入一个就行了)然后项目名、路径等。


这样就可以真正进入开发界面了。


注意:按照网上的教程需要重新启动一下“微信web开发者工具”原因可能是使用某些功能的时候会提示AppId未注册。


网上有一个微信Demo,也不知道是不是微信官方的,里边有大量的例子。


demo下载:demo.zip


这是一个比较全的demo,包含了大部份功能,及微信所开放的api。


微信,WEB,小程序


点击关闭退出到项目选择页面,然后选择“添加应用”与上面方法相同,注意,“项目路径”选择刚刚所下载的“Demo” 让后启动,就可以体验大量demo了。


写一个hello world!


一般有三个文件:


.wxml 相当于html与xml的结合体


.js 就是js文件


.wxss 某种css吧


需要注意的是目前小应用暂时不支持其他插件比如jQuery啥的。


选择"编辑"选项卡, 打开/pages/index/index.wxml


微信,WEB,小程序


是不是很熟悉,就是html与xml的结合 先不做修改。然后打开 /pages/index/index.js


微信,WEB,小程序


在Page函数里的 data 对象里的 motto的值改成Hello Dudulu


bindViewTap 这个方法是绑定的跳转,如果你设置了userInfo的nickName的值,它将会显示在页面正中央,当你点击"nickName"的时候,它路由跳转到/pages/logs/logs.wxml了


改完后回到"调式"选项卡,点击"重启"就可以刷新刚刚所修改的文本了。


运行效果:


微信,WEB,小程序


这里有一个错误,github上已经有修复改错误的方法了,还需要替换一个文件:


文件3: asdebug.js


替换目录: /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/weapp/appservice/asdebug.js
就可解决以上报错的问题。


已经有大神把微信的官方文档给抓取下来了, 文档地址:http://notedown.cn/weixin/component


尾巴
咱们这种破解方式显然是不行的,我觉得微信可能会封掉这种方法,所以大家赶紧。
我说它是未来,这个大家自己体会,这次我们不能再错过了。
我们一起加油!

这篇关于开发微信小程序入门前的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1083371

相关文章

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创

基于Python开发PPTX压缩工具

《基于Python开发PPTX压缩工具》在日常办公中,PPT文件往往因为图片过大而导致文件体积过大,不便于传输和存储,所以本文将使用Python开发一个PPTX压缩工具,需要的可以了解下... 目录引言全部代码环境准备代码结构代码实现运行结果引言在日常办公中,PPT文件往往因为图片过大而导致文件体积过大,

使用DeepSeek API 结合VSCode提升开发效率

《使用DeepSeekAPI结合VSCode提升开发效率》:本文主要介绍DeepSeekAPI与VisualStudioCode(VSCode)结合使用,以提升软件开发效率,具有一定的参考价值... 目录引言准备工作安装必要的 VSCode 扩展配置 DeepSeek API1. 创建 API 请求文件2.

基于Python开发电脑定时关机工具

《基于Python开发电脑定时关机工具》这篇文章主要为大家详细介绍了如何基于Python开发一个电脑定时关机工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 简介2. 运行效果3. 相关源码1. 简介这个程序就像一个“忠实的管家”,帮你按时关掉电脑,而且全程不需要你多做

Java中的Opencv简介与开发环境部署方法

《Java中的Opencv简介与开发环境部署方法》OpenCV是一个开源的计算机视觉和图像处理库,提供了丰富的图像处理算法和工具,它支持多种图像处理和计算机视觉算法,可以用于物体识别与跟踪、图像分割与... 目录1.Opencv简介Opencv的应用2.Java使用OpenCV进行图像操作opencv安装j

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要

在 VSCode 中配置 C++ 开发环境的详细教程

《在VSCode中配置C++开发环境的详细教程》本文详细介绍了如何在VisualStudioCode(VSCode)中配置C++开发环境,包括安装必要的工具、配置编译器、设置调试环境等步骤,通... 目录如何在 VSCode 中配置 C++ 开发环境:详细教程1. 什么是 VSCode?2. 安装 VSCo

C#图表开发之Chart详解

《C#图表开发之Chart详解》C#中的Chart控件用于开发图表功能,具有Series和ChartArea两个重要属性,Series属性是SeriesCollection类型,包含多个Series对... 目录OverviChina编程ewSeries类总结OverviewC#中,开发图表功能的控件是Char

鸿蒙开发搭建flutter适配的开发环境

《鸿蒙开发搭建flutter适配的开发环境》文章详细介绍了在Windows系统上如何创建和运行鸿蒙Flutter项目,包括使用flutterdoctor检测环境、创建项目、编译HAP包以及在真机上运... 目录环境搭建创建运行项目打包项目总结环境搭建1.安装 DevEco Studio NEXT IDE