Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/studygolang/miniprogram
Go 中文网微信小程序
https://github.com/studygolang/miniprogram
Last synced: about 2 months ago
JSON representation
Go 中文网微信小程序
- Host: GitHub
- URL: https://github.com/studygolang/miniprogram
- Owner: studygolang
- License: mit
- Created: 2018-04-13T02:13:08.000Z (over 6 years ago)
- Default Branch: dev
- Last Pushed: 2022-12-12T05:24:58.000Z (about 2 years ago)
- Last Synced: 2024-04-18T10:45:28.815Z (8 months ago)
- Language: JavaScript
- Homepage: https://studygolang.com/
- Size: 1.47 MB
- Stars: 9
- Watchers: 5
- Forks: 3
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# miniprogram
Go 中文网微信小程序
## vue-kbone
使用 vue 多端开发(小程序和Web)，基于 [kbone](https://github.com/wechat-miniprogram/kbone) 的 element 和 render。
* 一键接入，立即使用
* 支持更完整的 vue 语法及特性
* webpack、es6、babel、hot reload、cli、vue-router、vuex，你想要的都有
## 开发
* Web 端：直接浏览器访问 localhost:8080/ 即可看到效果。
```
npm run web
```
* 小程序端：使用开发者工具打开 dist/mp 目录即可。
```
npm run mp
```
## 构建
* Web 端：构建完成会生成 dist/web 目录
```
npm run build
```
* 小程序端：构建完成会生成 dist/mp 目录
```
npm run build:mp
```
## 小程序端打开
需要先进入 dist/mp 目录执行 `npm install` 安装相关的依赖包，然后用开发者工具打开 dist/mp 目录后再进行 npm 构建（关于 npm 构建可[点此查看官方文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)）。
## 目录说明
此模板 Web 端使用单入口，通过 vue-router + 动态 import 的方式来运行；小程序端则按照业务分拆成多个页面，同属一个业务的页面则通过 vue-router 来组织。
```
├─ build
│ ├─ miniprogram.config.js // mp-webpack-plugin 配置
│ ├─ webpack.base.config.js // Web 端构建基础配置
│ ├─ webpack.dev.config.js // Web 端构建开发环境配置
│ ├─ webpack.mp.config.js // 小程序端构建配置
│ └─ webpack.prod.config.js // Web 端构建生产环境配置
├─ dist
│ ├─ mp // 小程序端目标代码目录，使用微信开发者工具打开，用于生产环境
│ └─ web // web 端编译出的文件，用于生产环境
├─ src
│ ├─ common // 通用组件
│ ├─ mp // 小程序端入口目录
│ │ ├─ home // 小程序端 home 页面
│ │ │ └─ main.mp.js // 小程序端入口文件
│ │ └─ other // 小程序端 other 页面
│ │ └─ main.mp.js // 小程序端入口文件
│ ├─ detail // detail 页面
│ ├─ home // home 页面
│ ├─ list // list 页面
│ ├─ router // vue-router 路由定义
│ ├─ store // vuex 相关目录
│ ├─ App.vue // Web 端入口主视图
│ └─ main.js // Web 端入口文件
└─ index.html // Web 端入口模板
```
## 其他说明
如果要使用 ts，则在 vue 的 script 标签上加上 `lang="ts"`，具体可参考 src/list/Index.vue。如果要使用 reduce-loader，就不能使用 ts，因为 ts 目前没有支持内联 loader。
## License
MIT
# Mina
> Searching for missing children, and help them come back home.
We are a technical team with love and emotions.
Welcome to join us.
:)
## Kbone Install & Usage
This MiniProgram project in Wechat base on [Tencent Kbone](https://github.com/Tencent/kbone)
## Install & Run
``` bash
npm install -g kbone-cli
// 开发小程序端
npm run mp
// 开发 Web 端
npm run web
// 构建 Web 端
npm run build
```
