找回密码
 立即注册

扫一扫,访问微社区

搜索

本文来自

网络资源

网络资源

人已关注

请添加对本版块的简短描述

精选帖子

微信小程序项目

[复制链接]

该用户从未签到

16

主题

0

帖子

30

积分

实习版主

Rank: 7Rank: 7Rank: 7

积分
30
12020 BF丶小怪 发表于 2018-5-16 15:05:27
最近要开始做小程序项目,之前本人并未开发过小程序,毕竟之前一直做的vue项目,不过开了下小程序开发文档觉得还是很容易的 ,再此把自己的学习过程分享一下。
首先一个项目的开始我们要熟悉项目结构,微信小程序的项目结构还是很清晰的

一个完整的小程序,包含描述整个项目的app文件系统(app.js,app.json,app.wxss)和各个page(每个page包含js,json,wxml,wxss)。其中,js文件处理逻辑,json存放配置,wxml存放页面结构,wxss存放样式表。

  • app文件系统
    app.js,app.json,app.wxss这3个文件放在项目的根目录下,其中app.wxss文件不是必须的,不过一般都会将项目中通用的样式放在这里。
  • page文件系统
    它包含4个文件:js(必须),wxml(必须),json(非必须),wxss(非必须)。
在这个基础上我增加了requests文件夹子 主要用来存放数据接口(api)和封装了微信的request请求

function request(url, data, successCb, errorCb, completeCb) {
wx.request({
url: url,
method: 'GET',
header: {
'Content-type': 'json'
},
data: data,
success: function (res) {
utils.isFunction(successCb) && successCb(res.data);
},
error: function () {
utils.isFunction(errorCb) && errorCb();
},
complete: function () {
utils.isFunction(completeCb) && completeCb();
}
});
}
另外样式引用了最火的小程序框架weui 让用户体验和微信一样的风格 在项目中添加weui.wxss
然后在app.wxss中
@import "./weui.wxss";
基本的项目结构就是这样的,放几张自己的项目图在上面仅供参考

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x



上一篇:最好玩的四个微信小程序,终于给整理出来了!
下一篇:微信小程序从0到1,它是如何冷启动的?
快速回复 返回顶部 返回列表