小白教程 微信小程序 官方示例Demo下载及运行
微信小程序官方文档中提供了一个很棒的示例程序Demo,针对各组件写了很详细的使用方法。本文介绍如何下载、配置环境、运行该Demo,主要包括:github下载,安装nodejs环境,nmp安装一些包,在小程序开发工具中运行等。
本文假设你已具备微信小程序开发的基本技能,新建小程序啊、创建自己的开发者ID等,要是还没有,请移步小程序开发者文档。
小程序二维码如下,可先行体验一下。
1. github下载官方示例小程序代码
1. 进入github主页。 小程序文档中给了连接地址了,点击:https://github.com/wechat-miniprogram/miniprogram-demo。
2. 下载。点击右上方绿色的”code”按钮,选择download zip,下载到你想放的目录里即可。这里我放到了"/D/.../官方实例”文件夹。(注意,图1.2中我这里的文件夹比官方github中,多了一个node_modules文件夹,这个是下一步通过构建npm生成的。)
2. 安装nodejs
nodejs是npm的运行环境,需要提前下载。如果你的电脑中已经有nodejs并配置好,请转到第3节。
2.1 下载
进入nodejs官网,根据自己的电脑系统选择相应的安装包,这里我选择的是windows64位.msi。
2.2 安装并设置系统变量
1. 运行安装。我安装在D盘的software中了,安装好后会出现一个nodejs文件夹,这就安装好了。因此我的路径为D:\software\nodejs。
2. 添加环境变量。按理,环境变量Path中应该已经添加了这个路径,但是我这添加的不完整,导致我在别的文件夹应用不了。所以手动设置了系统变量。此电脑->属性->高级系统设置->高级->环境变量->双击系统变量中的Path。在最后一行把刚才的路径D:\software\nodejs写进去,确定。
点击:新建、编辑、并确定
3. 进入demo文件夹,npm安装一堆包
安装实例小程序依赖的一些包,不然会报错哦。
- cmd到下载好的官方文件夹中:
- 简洁方式:进入刚才下载的官方示例文件夹,点击上面的文件夹路径,全部选中,然后输入cmd,即可在本位置打开cmd。
- 手动方式:直接打开cmd,cd到miniprogram-demo-master所在位置吧。
- 简洁方式:进入刚才下载的官方示例文件夹,点击上面的文件夹路径,全部选中,然后输入cmd,即可在本位置打开cmd。
- 在cmd中,按官方给出的依次运行以下命令。安装完之后就会出现我之前提到的miniprogram文件夹,并且在该文件夹中也有文件嗷。
npm i
cd miniprogram
npm i
4. 导入官方示例
正常导入就行,然后可以看到所有的完全的代码。打开后会编译一段时间,等一下就全部显示出来了。
5. 可能出现的问题:每次保存都出现错误码:-10007
查了一下是数据预拉取调试的问题,可以在详情->本地设置->关闭数据预拉取调试(取消勾选)
如果有不清楚的欢迎留言,大家共同成长!
小白教程 微信小程序 官方示例Demo下载及运行相关推荐
- 微信小程序官方示例 Demo 源代码获取
一.引言 最近在学习微信小程序,莫名其妙的刷到了腾讯官方出的 小程序示例 的 Demo,感觉做的真的很好. 要是自己在写小程序之前,多多参考这个 Demo 里面的一些东西,应该会轻松很多,而且做出来的 ...
- 微信小程序官方示例 Demo 代码
以前只知道小程序有一个UI组件库, 不知道小程序还有一个官方示例Demo,今天用了一下大大的提高了我的编程速度,界面截图如下: 具体的你们自己打开吧,我给你们整好了拦截,微信小程序官方示例Demo代码 ...
- 微信小程序官网DEMO模板
简介: 微信小程序官方原版DEMO模板,小程序开发参考必备人手一份,分享给大家. 网盘下载地址: http://kekewangLuo.cc/xtsm1j0hn5X0 图片:
- 一个微信小程序开发示例
一个微信小程序开发示例(豆瓣电影) 新版本(不包含工作流)请移步至:https://github.com/zce/weapp-douban 当前仓库会暂缓更新,主要留下来给大家答疑 需要基础教程的朋友 ...
- 小白开发微信小程序20--web api文档制作
1.什么是Swagger Swagger 项目已于 2015 年捐赠给 OpenAPI 计划,自此它被称为 OpenAPI. 这两个名称可互换使用. 不过,"OpenAPI"指的是 ...
- 小程序秒杀活动服务器,微信小程序官方上线张大仙周年活动,人数太多把服务器弄崩溃了...
原标题:微信小程序官方上线张大仙周年活动,人数太多把服务器弄崩溃了 说起如今人气最旺的<王者荣耀>主播,莫过于就是靠着一手"素质直播"走遍天下的张大仙了.之前由于一些合 ...
- 微信小程序官方调整头像昵称获取问题;微信扫码链接wifi,wifi地推,两种可行的解决方案
微信小程序官方调整头像昵称获取问题:微信扫码链接wifi,wifi地推 更新时间:2022年11月9日 由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访 ...
- wx.getFuzzyLocation BUG 微信小程序官方BUG 临时处理办法
20220720处理getFuzzyLocation 微信小程序官方BUG 临时办法 微信小程序发布了最新的地理位置获取为背景 几乎不可能申请到原有的getLocation 但是getFuzzyLoc ...
- 微信小程序官方接口生成带参数二维码
最近在做一个点餐项目需要生成带参数的二维码供顾客扫码点餐,网上有用许多二维码生成器,比如"草料二维码生成器",但是我还是偏爱用微信小程序官方提供的接口来实现. 首先贴一个文档地址, ...
- 跳一跳改分java源码_解密微信小程序漏洞:可下载任意小游戏源代码,“跳一跳”可改分...
原标题:解密微信小程序漏洞:可下载任意小游戏源代码,"跳一跳"可改分 雷锋网消息,据 IT 之家 1 月 2 日消息称,"跳一跳"居然可以利用漏洞自己改分数,甚 ...
最新文章
- Linux常用压缩与解压缩命令
- How To: Team Build 自定义版本号
- 中等职业学校计算机教学方法,浅析中等职业学校“计算机基础课”教学方法.doc...
- [云炬创业基础笔记]第七张创业资源测试12
- 记录几个前端样式小点
- android获得一个view的高度,Android ViewTreeObserver使用总结及获得View高度的几种方法...
- libcurl库的异步用法
- c mysql 工具类_Jave工具——servlet+jsp编程中mysql数据库连接及操作通用工具类
- 黑客们成功地在土豆上安装了Linux!
- mysql数据库学习——2,数据库的选定,创建,删除和变更
- python opencv 中文路径_解决python cv2.imread 读取中文路径的图片返回为None的问题
- 离奇的 FRM-18108 ,FRM-10102
- 方舟linux服务器更新,方舟怎么更新服务器版本 | 手游网游页游攻略大全
- 计算机游戏13关gongl,密室逃脱4之恐怖电影院第13关怎么过 第13关通关攻略
- keras 使用WGAN-div进行图像生成
- Java 转PPT为图片、PDF、SVG、XPS、ODP以及PPT和PPTX互转
- js 删除字符串中第一个逗号
- current root password的解决方案
- ALM系统介绍(三)
- 每日一题python90:找到小镇的法官