微信小程序开发实战总结(附源码)

    最近抽空学习了一下小程序，首先去看了一下官方文档(https://developers.weixin..com/miniprogram/dev/framework/),然后写了几个页面熟悉了一下开发模式，顺便模仿“小独”一个读文章的APP做了一个小程序练练手，已经将代码放到github上面，下载地址见文章末尾，如有需要，欢迎clone交流学习，下面是小程序码，大家可以在手机上面看效果。

项目目录结构：

├── app.js 公共js文件 ├── app.json 公共设置文件 ├── app.wxss 公共样式文件 ├── image 图片资源目录 │ ├── article_select.png │ ├── article_unselect.png │ ├── icon_select.png │ ├── icon_unselect.png │ ├── poetry_select.png │ ├── poetry_unselect.png │ ├── random.png │ ├── share.png │ ├── word_select.png │ └── word_unselect.png ├── pages 项目页面文件目录 │ ├── index 文章页面目录 │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── logs 日志页面目录 │ │ ├── logs.js │ │ ├── logs.json │ │ ├── logs.wxml │ │ └── logs.wxss │ ├── poetry 诗词页面目录 │ │ ├── poetry.js │ │ ├── poetry.json │ │ ├── poetry.wxml │ │ └── poetry.wxss │ └── word 语录页面目录 │ ├── word.js │ ├── word.json │ ├── word.wxml │ └── word.wxss ├── project.config.json ├── sitemap.json └── utils 工具类文件目录 ├── jinrishici.js └── util.js 

效果展示：

下面是对我学习过程的一个简单总结

一、工欲善其事必先利其器

小程序开发工具：https://developers.weixin..com/miniprogram/dev/devtools/devtools.html

矢量图标库网址：https://www.iconfont.cn/ 可以搜索下载你需要的图标

在线json格式解析网址：http://www.bejson.com/

Unicode编码转换网址：http://tool.chinaz.com/tools/unicode.aspx

二、目录结构和配置

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

一个小程序页面由四个文件组成，分别是：

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

以下是一个包含了部分常用配置选项的 app.json ：

{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true, "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ] }

页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

例如：

{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }

三、开发过程中遇到的问题

1、去掉数据中的P标签方法

或者使用正则表达式：

function delHtmlTag(str){
return str.replace(/<[^>]+>/g,"");//去掉所有的html标记
}

2、去除Button标签的边框

在css文件里面配置button的样式border:none;并且配置plain=true后发现button的边框还存在，最好查找资料发现小程序的边框是用button::after来设置的

修改方法：

button::after{ border: none; }

或者给button加了一个样式属性 plain=”true” 以后，再在样式文件中控制样式 button[plain]{ border:0 } ，就可以比较随便的自定义样式了

参考链接：https://www.jianshu.com/p/3abc88a5f22e

3、小程序水平分割线

test.wxml

test.wxss

/* 横着的分割View样式 */ /*分割线样式*/ .divLine{ background: #E0E3DA; width: 100%; height: 5rpx; }

参考链接：https://www.jianshu.com/p/ad687af85aa2

4、微信小程序最新获取用户昵称和头像的方法

 
  
    open-data> //获取用户头像直接显示在小程序中 
   
     open-data> //获取用户昵称直接显示在小程序中 
    
  

参考链接：https://blog.csdn.net/weixin_/article/details/

5、显示圆形头像的方法

test.wxml

test.wxss

.userinfo-avatar { overflow:hidden; display: flex; position:absolute; width: 160rpx; height: 160rpx; margin: 20rpx; margin-top: 50rpx; border-radius: 50%; border: 2px solid #fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); } 

参考链接：https://www.cnblogs.com/lguow/p/9197187.html

6、微信小程序下拉刷新/上滑到底部加载更多

微信小程序的这两个功能是通过onPullDownRefresh和onReachBottom来实现的

同时需要在对应page的json文件里面添加如下配置：

"enablePullDownRefresh": true,

参考链接：https://developers.weixin..com/miniprogram/dev/reference/api/Page.html，https://blog.csdn.net/ruffaim/article/details/78839214

四、源码下载

Github地址：https://github.com/javaboyka/wx_mryd欢迎大家clone交流。