All Projects → eacdy → Itmuch Miniapp

eacdy / Itmuch Miniapp

IT牧场小程序前端代码,使用mpvue + vant-weapp构建。本项目仅供教学使用,如果前端基础不好的同学,可以直接放弃。不影响Spring Cloud Alibaba的学习。

Projects that are alternatives of or similar to Itmuch Miniapp

Ithome Lite
🥛 IT之家第三方小程序版客户端(使用 mpvue 开发,兼容 web)
Stars: ✭ 531 (+247.06%)
Mutual labels:  mpvue, miniapp
Examples
Stars: ✭ 133 (-13.07%)
Mutual labels:  mpvue
Neteasemusicwxminiapp
仿网易云音乐APP的微信小程序
Stars: ✭ 1,092 (+613.73%)
Mutual labels:  miniapp
Mpvue Vuex Demo
用mpvue构建的小程序-vue模板项目,还引入了vuex,sass,flyio等
Stars: ✭ 112 (-26.8%)
Mutual labels:  mpvue
Mpvuesimple Quickstart
mpvue的一个快速搭建脚手架,添加引入原生小程序开发的UI如iview-weapp、wux-weapp等,包含vuex、axios、mp-weui的示例
Stars: ✭ 71 (-53.59%)
Mutual labels:  mpvue
Mpvue Ts Demo
A Mpvue demo project with TypeScript. Mpvue搭配TypeScript也是妥妥的。
Stars: ✭ 119 (-22.22%)
Mutual labels:  mpvue
Vantweappmpvuedemo
mpvue中使用Vant Weapp
Stars: ✭ 46 (-69.93%)
Mutual labels:  mpvue
Goji Js
React ❤️ Mini Program
Stars: ✭ 139 (-9.15%)
Mutual labels:  miniapp
Wx Miniprogram Boilerplate
基于Gulp微信小程序开发工作流,支持less样式编写,支持ESLint代码检查等功能
Stars: ✭ 122 (-20.26%)
Mutual labels:  miniapp
Mpvue Weui
用 vue 写小程序,基于 mpvue 框架重写 weui。
Stars: ✭ 1,463 (+856.21%)
Mutual labels:  mpvue
Wxh5sudoku469
mpvue版 ——H5 和 微信小程序同时开发 数独游戏
Stars: ✭ 103 (-32.68%)
Mutual labels:  mpvue
Service Mpvue Mini
基于mpvue的顺风车、约车小程序,目前已上线~~
Stars: ✭ 89 (-41.83%)
Mutual labels:  mpvue
Mp canvas drawer
🚀 微信小程序上canvas绘制图片助手,一个json就制作分享朋友圈图片
Stars: ✭ 1,611 (+952.94%)
Mutual labels:  mpvue
Mpvue Iview Weapp
使用mpvue导入iview-weapp
Stars: ✭ 61 (-60.13%)
Mutual labels:  mpvue
Vscode Miniapp Helper
微信小程序开发助手 for VSCode
Stars: ✭ 137 (-10.46%)
Mutual labels:  miniapp
Mpvue Loader
mpvue loader
Stars: ✭ 47 (-69.28%)
Mutual labels:  mpvue
Fard2
🎅 fre 转小程序的新思路 ♂ learn once, write anywhere.
Stars: ✭ 103 (-32.68%)
Mutual labels:  miniapp
Mpvue Quickstart
mpvue quickstart
Stars: ✭ 115 (-24.84%)
Mutual labels:  mpvue
Takeaway
🍰 mpvue Takeaway WeChat Mini Program
Stars: ✭ 141 (-7.84%)
Mutual labels:  mpvue
Zmi Nerd
😃 Simple transform tool
Stars: ✭ 139 (-9.15%)
Mutual labels:  miniapp

itmuch-miniapp

本项目是 IT牧场 小程序的前端代码。

本仓库用于慕课网《Spring Cloud Alibaba从入门到进阶》课程的教学。

对于前端基础不好的童鞋,可以直接放弃折腾,不会影响Spring Cloud Alibaba的学习。

该前端代码的主要作用是帮助大家感受小程序开发是个怎么回事,另外帮助大家快速理解视频中的业务。

技术选型 & 鸣谢

预览 & 体验

扫描如下小程序码即可。

首页 个人中心 投稿 扫我体验
小程序 小程序 小程序 小程序

使用说明

1. 安装Node.js

笔者使用的版本是 v8.15.0建议和笔者保持一致

2. 下载本仓库代码

可使用Git下载,也可以直接下载本仓库压缩包,二选一即可。

方式一、使用Git下载代码

git clone https://github.com/eacdy/itmuch-miniapp.git

方式二、用浏览器直接访问如下地址,下载代码

https://github.com/eacdy/itmuch-miniapp/archive/master.zip

3. 修改app信息

修改 project.config.json ,按需修改如下两行

"appid": "修改为你的appid", // 这里提供一个给大家测试:wx5398457df5368458
"projectname": "修改为你的项目名称,尽量用英文",

其中,appid在 微信公众平台 - 开发 - 开发设置中可以找到。

4. 安装 & 启动前端代码

# 安装项目相关依赖
npm install
# 加速:
npm --registry https://registry.npm.taobao.org install

# 开发环境启动部署
npm run dev

# 生产环境构建
npm run build

# 其他,可参考:http://mpvue.com/build/

5. 下载 & 安装微信开发者工具

6. 修改调用API地址

找到src/utils/api.js ,找到

// 后端接口基础路径
export const BASE_API_URL = '';

将其修改为你的后端地址,例如:

export const BASE_API_URL = 'http://localhost:8080';

7. 将代码导入到开发者工具

注意:务必勾选 不校验合法域名...

开发者工具

可以预览啦!

8. 你可能会遇到的问题

8.1 Windows操作系统执行npm install时,报如下异常:

Error: Can't find Python executable "python", you can set the PYTHON env variable

管理员权限执行如下命令即可:

npm install --global --production windows-build-tools

如果还是不行,那只能参考node-gyp官方的描述去尝试了:https://github.com/nodejs/node-gyp#configuring-python-dependency 。你得手动安装Python,然后执行一下:

npm config set python /path/to/executable/python

8.2 node-sass下载报404

修改package.json中引用的node-sass的版本即可。node-sass的版本可以在这里查看:https://github.com/sass/node-sass/releases

8.3 node-sass死活下载不下来(非404)

默认情况下,node-sass是从GitHub上下载二进制文件的,而GitHub把二进制文件存储在了AWS S3中。国内访问S3很不稳定。因此,也造成了node-sass安装上的困扰。

可参考 https://segmentfault.com/a/1190000010984731 的说明,里面总结了四种方式,总有一种方式能够解决。

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].