交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 详解微信小程序开发(项目从零开始)

    一、序

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

    注: 小程序是一套特殊的东西,融合了原生和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,下载 有需要的可以去下载,记得点个赞,哈哈。

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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • 微信小程序开发技巧汇总
    • 微信小程序开发常见问题及解决方案
    • 微信小程序云开发修改云数据库中的数据方法
    • 详解从0开始搭建微信小程序(前后端)的全过程
    • 微信小程序从注册账号到上架(图文详解)

    广而告之:
    热门推荐:
    深入浅析css3 中display box使用方法

    css3给display属性提供了box这个值,极大的方便了开发者,下面给大家介绍css3 display box具体用法。 其中的一个场景如下: 假如我们想要使得内部的123元素水平以不同的比例分割outer所占的空间,以往的做法我们可能会让123元素浮动或者设置display属性为inline-block,然后再···

    .Net下的签名与混淆图文分析

    签名 即强命名程序集,可以确保你的程序集唯一,而不被篡改、冒用等;即使相同名字的程序集如果签名也会不同。 签名前后程序集结构对比 假设程序集名子叫"WindowsApplication1",签名前后程序集信息对比复制代码 代码如下:WindowsApplication1, Version=1.0.0.0, Cultur···

    喜提百度冥火算法3.0,高质量原创内容依然是搜索引擎制胜法宝

    从百度冥火算法3.0的发布不难发现,搜索引擎整体质量的提升主要是依靠用户上网体验度及优质内容,其中伪原创是百度搜索引擎严厉打击问题之一,要想避免冥火算法3.0的攻击,我们应当做好搜索内容的提升。  因此,许多SEO站长认为原创文章必须是高质量的内容,但他们···

    Robots.txt 文件应放在哪里?

    Robots.txt 文件必须放在网站的根目录。

    JS实现的判断方法、变量是否存在功能示例

    本文实例讲述了JS实现的判断方法、变量是否存在功能。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> ////www.kunjuke.com/ar···

    mysql安装图解 mysql图文安装教程(详细说明)

    MySQL5.0版本的安装图解教程是给新手学习的,当前mysql5.0.96是最新的稳定版本。 mysql 下载地址 //www.kunjuke.com/softs/2193.html 下面的是MySQL安装的图解,用的可执行文件安装的,详细说明了一下!打开下载的mysql安装文件mysql-5.0.27-win32.zip,双击解压缩,运行“···

    javascript Object与Function使用

    如今的JavaScript再也不是以前被当做玩具的在网页上运行的花哨的脚本了。JavaScript已经逐渐标准化,作为一门真正的编程语言广泛地应用在Web开发上。因此,越来越多的人开始重新认识这门脚本语言,并在不断地探索关于JavaScript核心思想和实现原理,过程中遇到了一些非常···

    帝国CMS 6.0功能解密之字段处理函数

    前言: 增加/修改字段时可以设置“后台增加信息处理函数”、“后台修改信息处理函数”、“前台增加信息处理函数”、“前台修改信息处理函数”,可以分别设置对字段内容处理的函数,对于对字段内容存放格式有特殊要求的模型用得比较多···

    ansible动态Inventory主机清单配置遇到的坑

    坑1 : 动态主机清单配置,需要按照ansible的要求的格式返回给ansible命令的 源代码如下: 但是在ansible-playbook中使用动态主机配置文件的时候,发生了错误!!! 提示没有匹配的主机信息 分析: 数据库已配置好,python脚本也能输出,问题在于输出的结果不是ansible想要的格···

    前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)

    项目背景:.Net 3.5+MySQL+jQuery+WebService 在公司做这个项目已经6个多月了,总结一些问题,也算是抛砖引玉吧,希望园子里更多的朋友一起分享一些技巧。 1、 WebService方法返回值不能为void。 当WebService方法返回值为void时,FF和Chrome会持续等待,认为这个请求没···