# uni-cli-mp

**Repository Path**: lyflyy/uni-cli-mp

## Basic Information

- **Project Name**: uni-cli-mp
- **Description**: uniapp 微信小程序开发脚手架
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-05-12
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uniapp-微信小程序开发脚手架

* 包含基本网络请求
* 微信登录流程
* 微信小程序头部处理
* 上拉加载数据

> 小程序使用uniapp开发，类vue，有vue基础上手及其简单。[官网地址](uniapp.dcloud.io/quickstart)

* 有些ui组件使用uniapp自己的uni-ui，组件使用方式：拷贝组件到项目中进行引用，方便修改，基础组件无需手动导入
* 网络请求使用[luch-request](https://ext.dcloud.net.cn/plugin?id=392)l，uniapp插件，类axios操作，可进行请求拦截、扩展。

### 项目启动方式
1. 简单浏览uniapp官网
2. 下载[HBuilderX-uniapp编辑器](https://www.dcloud.io/hbuilderx.html)
3. 导入项目
4. 运行到小程序模拟器


### 注意事项


```
# 1. 超出n行。。。显示组件
<sunui-omitted sty="font-size:36rpx;" :clamp="1" :text="item.type" />

# 2. icon ttf字体下载到/static/icon下。并在common.scss中配置css
 @font-face {
     font-family: filter-icon;
     src: url('~@/static/icon/filter.ttf');
 }
 
 .filter-icon-class {
 	 font-family: filter-icon;
 	 font-size: 20rpx;
 }
 最终在页面调用
 <text class="filter-icon-class">&#xe641;</text>
 
 # 3.网络 请求接口在/api/api中配置，permission代表着是否需要权限，配置了true的，如果没有权限，会拦截跳转至登陆页
 userInfo: {url: '/userInfo',permission: true}
 
 # 4.上拉刷新列表只需要引用loadMoreMixin即可，在页面上提供需要调用的url，参考more页
 http://www.mescroll.com/
 
 # 5. 网络请求
 import { http } from '@/utils/luch-request/index.js'
 
 loadData(){
 	http.get(this.$api.userInfo, {}).then((res)=>{
 		if(res && res.statusCode && res.statusCode == 200){
 			this.setUser(res.data)
 		}
 	}).catch((err)=>{
 		console.log('request fail', err);
 	})
 }
 
 # 6. vuex操作
 store中进行变量的定义。
 页面引入vuex - import {mapState,mapMutations} from 'vuex'
 computed: {
 	...mapState({
 	   mobile: state => state.user.mobile,
 	}),
 },
 ...mapMutations({
 	'setMobile': 'user/SET_MOBILE',
   }),
   
   #7. 横屏转回竖屏时字体无法重新计算bug，官方暂时没有提出解决方案
   问题解决，通过跳转空白页：https://ask.dcloud.net.cn/article/38151
   https://ask.dcloud.net.cn/question/99716
   
   有横屏的问题可以按照我的解决方案先来处理，跳转到block页面再回退两个页面，无感知解决问题
```