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

    最近抽空学习了一下小程序，首先去看了一下官方文档(https://developers.weixin.qq.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.qq.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.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

 

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

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

 

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

 

全局配置

小程序根目录下的 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

<view class="container">
     <!-- 分割线 -->
  <view class="divLine"></view>
</view>

test.wxss

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

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

 

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

<open-datatype="userAvatarUrl">open-data> //获取用户头像直接显示在小程序中
<open-datatype="userNickName"lang="zh_CN">open-data> //获取用户昵称直接显示在小程序中

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

 

5、显示圆形头像的方法

test.wxml

    <view class="userinfo-avatar">
      <open-data  type="userAvatarUrl"></open-data>
    </view>

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.qq.com/miniprogram/dev/reference/api/Page.html，https://blog.csdn.net/ruffaim/article/details/78839214

 

四、源码下载

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