详解微信小程序开发(项目从零开始)


Posted in Javascript onJune 06, 2019

一、序

微信小程序,估计大家都不陌生,现在应用场景特别多。今天就系统的介绍一下小程序开发。注意,这里只从项目代码上做解析,不涉及小程序如何申请、打包、发布的东西。(这些跟着微信官方文档的流程走就好)。好了废话不多说,看目录。

注: 小程序是一套特殊的东西,融合了原生和web端。他是一个不完整的浏览器对象,所以很多DOM 、 BOM 的东西无法使用,但是他又通过微信APP实现了多线程。

二、如何创建小程序

很简单,首先下载微信开发者工具,下载稳定版本的就好。 下载 然后,创建小程序,可以参考下述图片:

详解微信小程序开发(项目从零开始) 

详解微信小程序开发(项目从零开始) 

详解微信小程序开发(项目从零开始)

注意正式的小程序需要审批,拿到正式的APPID,我们测试的或者暂时没有的可点那个测试的appid,小程序模板选择默认就好。按照这样的流程走完,我们就创建完一个小程序了。

三、webstrom支持小程序开发

创建完小程序之后,我们先不着急开发。工欲善其事必先利其器,微信开发者工具有点卡,而且功能少,开发效率很低。所以我们还是改造自己的编译器,这里只介绍2种方法。一是 hbuilderX,他有支持小程序的模块,很小巧的一款编译器; 二是 webstorm,我用的他,在这介绍一下配置的方法,其他的大家自行google吧。

1、支持wxml和wxss的文件类型,有语法高亮。 打开webstorm编译器,依次点击 文件 -- 设置 -- 编辑器 -- 文件类型 , 找到 html文件,添加 *.wxml; 找到Cascading style Sheet ,添加 *.wxss。就OK了

2、支持小程序代码提醒。 下载 这个文件,然后,把他放到一个显眼的地方; 然后, webstorm 点击 文件 -- 导入设置 ,找到这个下载的文件,点击确定即可。

以上就是webstorm支持小程序语法的操作。

四、基础文件目录详解

详解微信小程序开发(项目从零开始)

然后解释一下小程序的目录结构。

project.config.json: 小程序的配置文件,包含项目打包配置、上传代码自动压缩等等,是一些开发、打包之类的配置。

app.json: 当前项目的配置文件。包括项目的页面引入、导航条颜色、导航条标题 等等,是项目具体到代码开发上的配置。介绍几个配置:

pages: 包含的页面。每次新增页面都得在这里引入,否则新页面的json配置等无法生效。 注意pages中页面先写的先渲染,所以数组第一条也就是我们的首页。

window: 配置所有页面导航条字体、颜色、背景色等

app.js: 小程序入口文件。生成小程序实例,App({}), 通常在这获取用户信息、授权信息、定义全局变量等。

app.wxss: 小程序全局 style 文件。对整个项目页面生效。通常规定项目的 字体、基础颜色,定义一些公共样式。

utils: 工具函数目录。通常用来放一些公共的js方法。比如封装的request请求,一些别的处理数据什么的方法。

pages: 小程序的页面目录。所有的小程序页面,都写在这里面。

五、完善项目目录

上边大致解释了一下小程序的基础文件,现在按照常见的规范完善一下项目目录,这里面包含一些个人见解,有需要的参考即可。先看一下结果:

详解微信小程序开发(项目从零开始)

现在解释一下这些目录:

components: 我们封装的小程序可复用组件。

constants: 一些项目中的常亮。

image: 用到的图片。

services: 用到的所有接口目录

大致就新建了这几个,如果有别的需求,根据自己的情况增加。

六、基础语法详解

现在大致解释一下小程序的语法。首先, 创建新页面,默认都创建 *.wxml *.wxss *.js *.json 和我们平时写的代码差不多,都是html js css,多了个json配置文件

*.json:常用的属性有2大块,navigationBarTitleText 相关的设置顶部标题的,usingComponents 引用的组件

*.js:getApp() 获取小程序实例,拿全局变量等; Page({}) 创建页面; data 当前页面的变量;onLoad 生命周期,页面加载完毕。

*.wxml:注意,小程序支持的标签很少,像 span 是支持的,div不支持,一般用view代替块级,span、text 代替行级。

*.wxss:大部分css选择器不支持,支持的好像才5个,想支持less等得自己配置

 

// json文件
{
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText":"我的",
 "usingComponents": {
 "menu": "/components/menu/index"
 }
}

// js文件
const app = getApp()
Page({
 data: {},
 
 onLoad: function () {},

})

七、实现页面跳转

和通常的web开发一样,小程序页面跳转页分2中,wxml中的vavigator标签,以及js的navigator相关的api。路由跳转的方法有好几个,这里不一一赘述了,常用的直接跳转

wx.navigateTo,重定向 wx.redirectTo等等,具体的请看官方文档。这里强调一下路由传参,很简单:
1、少量数据。直接问号传参。然后在目标页面的onLoad方法中通过options参数接收。
2、大量数据。直接塞到全局变量里面。

// wxml跳转页面
<navigator url="/pages/my{{item.path}}" class="navigator">
  <image class="imgIcon" src="{{item.icon}}"></image>
  <view class="navigator-text" data-id="{{item.key}}" bindtap="handleMenuTap">{{item.name}}</view>
 </navigator>

//js跳转页面
wx.navigateTo({
  url: `/pages/my/appointDetail/index?_id=${this.data.marker.id}`
 })

//路由传参如何接收


 onLoad: function (options) {
 console.log(options)
 },

八、wx.request 的封装

在utils中新建request.js,简单封装了一下,一些数据要全局配置的都引进来,然后做了些错误的统一处理,没什么难度,不过要特别注意一下cookie的携带。具体代码如下:

const app = getApp()
export default function request(url, options = {}) {
 return new Promise(function (resolve, reject) {
 wx.request({
  url: `${app.origin}${url}`,
  method: 'GET',
  ...options,
  data: options.data,
  header: {
  'content-type': 'application/json',
  'cookie': wx.getStorageSync("cookie")
  },
  success: function (res) {
  //重新授权登录
  if (res.statusCode === 401){
   wx.redirectTo({url: '/pages/login/index'})
   return
  }else if (res.statusCode !== 200) {
   reject({ error: '服务器忙,请稍后重试', code: 500 });
   return
  } else {
   if (url === '/api/cdz/user/weixin/login') {
   const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];




   if (cookie) wx.setStorageSync("cookie", cookie);
   }
   resolve(res.data);
  }
  },
  fail: function (res) {
  // fail调用接口失败
  if (url === '/api/cdz/user/weixin/login') {
   const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];
   if (cookie) wx.setStorageSync("cookie", cookie);
  }
  reject({ error: '网络错误', code: 0 });
  }
 })
 })
}

然后我们使用的时候直接使用封装好的request方法,这样所有的api就封装成一个个函数。我们在页面中直接import引入调用即可。

import request from "../utils/request";
import { stringify } from "../utils/util"

export function testPost(data) {
 return request(`/api/test/post`, {
 method: 'PUT',
 data,
 })
}

export function testGet(data) {
 return request(`/api/test/get`)
}

九、使用 npm (引入 weui、moment等插件)

因为小程序使用的是不完整的浏览器对象,所以很多js包都是不好使的,比如jquery之类的。所以npm基本是废了,能用的依赖包很少,具体哪些能用得自己发掘了。这里还是要介绍一下小程序如何使用npm,毕竟有些包还是要用的。

1、打开 微信开发者工具 -- 点击 详情 -- 勾选 使用npm模块

2、打开命令行,进入项目的根目录下, npm init 初始化npm

3、npm i 。。。安装你需要的依赖

4、打开 微信开发者工具 -- 点击 工具 -- 点击 构建npm。 此时小程序会将 node_modules 文件编译打包,生成新目录 miniprogram_npm ,

5、在需要用到的页面的js文件中,const moment= require('moment') 引入,直接使用即可

6、最后记得忽略文件。新建 .gitignore 文件,node_modules 、 package_lock.json 等文件不需要上传,最好只保留小程序的npm构建包,用什么依赖也是的那个下载。这个到不是必须的

ps: 特殊注意一下weui的引入,这个ui库是纯css的,没有js文件,所以他没法用npm引入,而是直接下载文件,我直接丢到根目录下,然后在 app.wxss 文件的开头引入

@import 'weui.wxss';,这样使用的

十、封装微信小程序可复用组件

现在篇幅有点太长了,这个另写一篇,有需要的可以去看。

十一、总结

以上就是我开发小程序的一些经验和总结,希望能帮到你。另外,整套程序的骨架(业务代码删掉了)我会上传到github,下载 有需要的可以去下载,记得点个赞,哈哈。

最后,我会另写一篇博客,写一下 如何封装小程序 组件,并附上 我开发小程序遇到的坑,以及对应的解决方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
javascript关于继承解析
May 10 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 #Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 #jQuery
JS根据json数组多个字段排序及json数组常用操作
Jun 06 #Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 #Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 #Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 #Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 #Javascript
You might like
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
详解vue 组件注册
2020/11/20 Vue.js
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
Python中多线程及程序锁浅析
2015/01/21 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python实现剪切功能
2019/01/23 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
编程输出如下图形
2013/11/24 面试题
2013年学期结束动员演讲稿
2014/01/07 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
计算机实训报告范文
2014/11/05 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
庐山导游词
2015/02/03 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python