wepy+async+sass微信小程序

项目地址

项目地址欢迎star

项目总览

项目运行

npm install wepy-cli -g
npm install
wepy build --watch

如遇到less不能编译的问题，请使用

npm install less -d

模块介绍

项目模块分为

• 新闻
• 新闻详情
• 笑一笑
• 机器人小艾

新闻

数据来源：极速数据
模块分为有头条、体育、娱乐等等13个类别。
支持手滑左右切换。
头部tab栏支持自动定位到相应的新闻类别，并且支持滑动,。
有加载动画。
右下角有刷新按钮。
当请求数据的时候，右下角按钮会旋转，并且可以上拉加载更多。

新闻详情

显示新闻的详细内容。

笑一笑模块

数据来源：大佬开源数据
该模块显示一些笑话、搞笑图片、搞笑gif图片、搞笑视频。
功能介绍： 有加载动画，支持下拉刷新，当点击图片时，可以预览图片，上拉加载更多，支持视频在线观看等。

机器人小艾模块

数据来源：百度的图灵机器人
和机器人小艾进行对话。

项目知识点

该项目使用的时小程序的wepy框架，在这里补充一下书写小程序的方法

• 小程序原生开发文档
• wepy开发文档
• mpvue开发文档
  简单说一下mpvue框架的语法和vue的语法是一样的，只是少了vue的一些东西，比如vue-router等等，还有一点比较烦就是每新增一个页面都要手动重启编译一下，但是好处也是有很多的，像vuex什么的都有。
  这个项目我选择的时wepy，这是一个类vue的框架，支持redux等等
  新建一个wepy项目也是特别的简单，使用如下代码即可。

npm install wepy-cli -g
wepy init standard myproject
cd myproject
npm install
wepy build --watch

该项目使用的是sass进行css编写，wepy默认是支持less的

wepy使用sass的步骤如下

//安装sass
npm i node-sass
//安装wepy-compiler-sass插件
npm install wepy-compiler-sass --save-dev
//配置wepy.config.js
module.exports = {
    "compilers": {
        sass: {
            'outputStyle': 'compressed'
        }
    }
};

wepy项目中使用async await

这里直接给链接了哈
wepy项目中使用async await

小程序解析HTML

1. 使用wxParse
2. 使用小程序自带的标签<text></text>或者<rich-text></rich-text>

项目中会需要使用一些组件或者一些api（下拉刷新、配置底部tabbar、获取手机系统的宽高）等等

不管是使用哪个框架，这些都是不变的，详情请点击小程序API

小程序的像素

向程序的像素使用的是rpx，对元素设置rpx，会让元素在不同的手机上显示的效果是一样样的，这个是小程序底层代码自动编译的。

扩展知识

微信小程序开发资源汇总