uniapp开发微信小程序

微信小程序开发指引

前言

本文档我们主要关注微信小程序的开发使用。微信小程序使用微信开发者工具开发,使用其专有语言WXML(WeiXin Markup Language是框架设计的一套标签语言)、WXS(WeiXin Script是小程序的一套脚本语言),WXS结合 WXML可以构建出页面的结构。但为了降低开发门槛,我们研究和使用了mpvue、taro、uni-app框架来开发微信小程序。因mpvue不再维护,且存在较多问题,放弃该框架,taro使用react、vue、Nerv开发。最终我们暂时选择了uni-app, uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

了解微信小程序

官方主页

  • 微信扫描下方二维码查看小程序示例(包括组件、拓展能力、接口、云开发)


    image

小程序开发指南

首先应了解小程序账号申请、服务器配置、业务域名配置等点击查看

任何一个普通的开发者,经过简单的学习和练习后,都可以轻松地完成一个小程序的开发和发布,见小程序开发指南

开发工具

工具介绍
微信开发者工具下载及安装

image

微信开发者工具

框架

框架描述

项目文件描述

对于wxml和wxs语法我们只需简单了解就可以了,因为我们最后使用的是vue.js来开发

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

  • .json 后缀的 JSON 配置文件 (页面配置)
  • .wxml 后缀的 WXML 模板文件 (页面结构)
  • .wxss 后缀的 WXSS 样式文件 (页面样式表)
  • .js 后缀的 JS 脚本逻辑文件 (页面逻辑)
主要配置示例
  • pages: 主包页面路径列表
  • subPackages: 分包结构配置
  • window: 全局的默认窗口表现
  • tabBar: 底部 tab 栏的表现
  • usingComponents: 导入三方组件
{
  "pages": [
    "pages/home/home",
    "pages/commodity/commodity",
    "pages/message/message",
    "pages/user/user"
  ],
  "subPackages": [
    {
      "root": "pages-home",
      "pages": [
        "community-detail/index",
        "comment-detail/index",
        "release-dynamic/index",
        "user-center/index",
        "webview/index"
      ]
    },
    {
      "root": "pages-commodity",
      "pages": [
        "detail/index",
        "pay-sure/index",
        "mall-comment/index",
        "mall-comment-detail/index"
      ]
    },
    {
      "root": "pages-message",
      "pages": [
        "system-message/index",
        "interactive-message/index",
        "detail/index"
      ]
    },
    {
      "root": "pages-user",
      "pages": [
        "login/login",
        "edit-user-info/index",
        "setting/index",
        "about/index",
        "user-services/index",
        "address/my-address/index",
        "address/add-address/index",
        "order/my-order/index",
        "order/order-detail/index",
        "order/logistics-detail/index",
        "order/release-comment/index"
      ]
    }
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#FFFFFF",
    "backgroundColor": "#FFFFFF"
  },
  "tabBar": {
    "color": "#808080",
    "selectedColor": "#1A1A1A",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "height": "50px",
    "fontSize": "12px",
    "iconWidth": "20px",
    "spacing": "3px",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "static/images/home_normal.png",
        "selectedIconPath": "static/images/home_selected.png",
        "text": "发现"
      },
      {
        "pagePath": "pages/commodity/commodity",
        "iconPath": "static/images/store_normal.png",
        "selectedIconPath": "static/images/store_selected.png",
        "text": "商城"
      },
      {
        "pagePath": "pages/message/message",
        "iconPath": "static/images/message_normal.png",
        "selectedIconPath": "static/images/message_selected.png",
        "text": "消息"
      },
      {
        "pagePath": "pages/user/user",
        "iconPath": "static/images/user_normal.png",
        "selectedIconPath": "static/images/user_selected.png",
        "text": "我的"
      }
    ]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "位置信息"
    }
  },
  "useExtendedLib": {
    "weui": true
  },
  "runmode": "liberate",
  "usingComponents": {
    "painter": "/wxcomponents/painter/painter",
    "mp-slideview": "weui-miniprogram/slideview/slideview"
  },
  "sitemapLocation": "sitemap.json"
}

组件

详细用法

结合小程序拓展组件库使用相关小程序的原始组件,见下方拓展能力部分

API

详细文档

拓展能力

拓展组件
拓展组件库源码
使用uni-app开发微信小程序的时候,在pages.json文件的usingComponents中可以引用微信拓展组件, 如下引入方式,编译时开发工具将自动编译到项目中

"usingComponents": {
  "mp-slideview": "weui-miniprogram/slideview/slideview"
}

调试

使用微信开发者工具运行、调试,与H5调试类似。开发工具自带模拟器,可以进行真机调试,如果后台服务使用本地ip,请打开开发工具,点击右上角"详情"->"本地设置"->"不校验合法域名...",将其勾选。更多详细内容查看小程序调试

image

image

了解uni-app

官方主页

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台

快速学习建议

  • 不需要专门去学习小程序的语法,uni-app使用的是vue的语法,不是小程序自定义的语法
  • 如果你还不会vue,先取官网学习使用vue
  • 第一步,看完uni-app官网的首页介绍。
  • 第二步,通过快速上手,亲身体验下uni-app。
  • 第三步,看完《uni-app官方教程》,出品人:DCloud,课时:共3节。

快速开始

uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。

可视化的方式
image
  1. 可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs开始之前,开发者需先下载安装如下工具

  2. HBuilderX:官方IDE下载地址,下载App开发版,可开箱即用
    创建uni-app、运行uni-app、发布uni-app、发布为小程序

  3. 注意事项

  • 在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。
  • 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具,需要开发者手动启动,然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面,在HBuilderX里面开发,在微信开发者工具里面就可看到实时的效果。


    image
  • HBuilderX 还提供了快捷运行菜单,可以按数字快速选择要运行的设备:


    image
命令行的方式
  1. 也可以使用 cli 脚手架,可以通过 vue-cli 创建 uni-app 项目
  • 安装nodejs
    nodejs下载网址:https://nodejs.org/en/
  • 环境安装
npm install -g @vue/cli
  • 创建uni-app (模板项目存放于 Github,由于国内网络环境问题,可能下载失败)
vue create -p dcloudio/uni-preset-vue my-project
  • 此时,会提示选择项目模板,初次体验建议选择 hello uni-app 项目模板,如下所示:


    image
  • 自定义模板
    选择自定义模板时,需要填写 uni-app 模板地址,这个地址其实就是托管在云端的仓库地址。以 GitHub 为例,地址格式为 userName/repositoryName,如 dcloudio/uni-template-picture 就是下载图片模板。
    更多支持的下载方式,请参考这个插件的说明:download-git-repo

  • 运行、发布uni-app

npm run dev:mp-weixin
npm run build:mp-weixin

框架

点击框架描述查看

  • 微信扫描下方二维码查看小程序示例(包括内置组件、接口、拓展组件、模板)


    image
  • 一个uni-app工程,默认包含如下目录及文件:


    image
  • pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
  • 它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容,在uni-app中是在manifest.json中配置
  • 在manifest.json中如果只是微信小程序开发,只需关注mp-weixin配置项
  • 编译到任意平台时,static 目录下的文件均会被完整打包进去,且不会编译。非 static 目录下的文件(vue、js、css 等)只有被引用到才会被打包编译进去。
    static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。
    css、less/scss 等资源不要放在 static 目录下,建议这些公用的资源放在自建的 common 目录下。
  • template内引入静态资源,如image、video等标签的src属性时,可以使用相对路径或者绝对路径,形式如下





  • 开发环境和生产环境
if (process.env.NODE_ENV === 'development') {
  console.log('开发环境')
} else {
  console.log('生产环境')
}
主要配置
  • easycom 配置uView组件库的按需引入,具体介绍见下方组件部分
"easycom": {
  "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}

page.json文件

{
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#FFFFFF",
        "backgroundColor": "#FFFFFF",
        "app-plus": {
            "background": "#efeff4"
        },
        "usingComponents": {
            "painter": "/wxcomponents/painter/painter",
            "mp-slideview": "weui-miniprogram/slideview/slideview"
        }
    },
    "pages": [
        {
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "发现",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom",
                "disableScroll":true
            }
        },
        {
            "path": "pages/commodity/commodity",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        },
        {
            "path": "pages/message/message",
            "style": {
                "navigationBarTitleText": "消息",
                "enablePullDownRefresh": false
            }
        },{
            "path": "pages/user/user",
            "style": {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": false,
                "backgroundColor": "#F0F0F0",
                "navigationStyle": "custom"
            }
        }
    ],
    "tabBar": {
        "color": "#808080",
        "selectedColor": "#1A1A1A",
        "borderStyle": "white",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "12px",
        "iconWidth": "20px",
        "spacing": "3px",
        "list": [
            {
                "pagePath": "pages/home/home",
                "iconPath": "static/images/home_normal.png",
                "selectedIconPath": "static/images/home_selected.png",
                "text": "发现"
            }, {
                "pagePath": "pages/commodity/commodity",
                "iconPath": "static/images/store_normal.png",
                "selectedIconPath": "static/images/store_selected.png",
                "text": "商城"
            }, {
                "pagePath": "pages/message/message",
                "iconPath": "static/images/message_normal.png",
                "selectedIconPath": "static/images/message_selected.png",
                "text": "消息"
            }, {
                "pagePath": "pages/user/user",
                "iconPath": "static/images/user_normal.png",
                "selectedIconPath": "static/images/user_selected.png",
                "text": "我的"
            }
        ]
    },
    "subPackages": [
        {
            "root": "pages-home",
            "pages": [
                {
                    "path": "community-detail/index",
                    "style": {
                        "navigationBarTitleText": "详情",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path" : "comment-detail/index",
                    "style":{
                        "navigationBarTitleText": "全部回复",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                "path": "release-dynamic/index",
                "style":
                    {
                        "navigationBarTitleText": "发布动态",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "user-center/index",
                    "style": {
                        "navigationBarTitleText": "个人中心",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom",
                        "disableScroll":true
                    }
                },
                {
                    "path": "webview/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                    }
                }
            ]
        },
        {
            "root": "pages-commodity",
            "pages": [
                {
                    "path": "detail/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "pay-sure/index",
                    "style": {
                        "navigationBarTitleText": "订单确认",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "mall-comment/index",
                    "style": {
                        "navigationBarTitleText": "用户评价",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "mall-comment-detail/index",
                    "style": {
                        "navigationBarTitleText": "全部回复",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                }
            ]
        },
        {
            "root": "pages-message",
            "pages": [
                {
                    "path": "system-message/index",
                    "style": {
                        "navigationBarTitleText": "系统消息",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "interactive-message/index",
                    "style": {
                        "navigationBarTitleText": "互动消息",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "detail/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                    }
                }
            ]
        },
        {
            "root": "pages-user",
            "pages": [
                {
                    "path": "login/login",
                    "style": {
                        "navigationBarTitleText": "登入",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "edit-user-info/index",
                    "style": {
                        "navigationBarTitleText": "个人资料",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "setting/index",
                    "style": {
                        "navigationBarTitleText": "设置",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "about/index",
                    "style": {
                        "navigationBarTitleText": "关于",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "user-services/index",
                    "style": {
                        "navigationBarTitleText": "服务协议",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "address/my-address/index",
                    "style": {
                        "navigationBarTitleText": "我的地址",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "address/add-address/index",
                    "style": {
                        "navigationBarTitleText": "添加地址",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "order/my-order/index",
                    "style": {
                        "navigationBarTitleText": "我的订单",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "order/order-detail/index",
                    "style": {
                        "navigationBarTitleText": "订单详情",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "order/logistics-detail/index",
                    "style": {
                        "navigationBarTitleText": "物流详情",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "order/release-comment/index",
                    "style": {
                        "navigationBarTitleText": "商品评价",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                }
            ]
        }
    ]
}

组件

  • 同样的在pages.json文件的usingComponents中可以引用微信拓展组件, 如下引入方式,编译时开发工具将自动编译到项目中,真的是非常的灵活,可以全方位引用多方组件,堪称完美。
"usingComponents": {
  "mp-slideview": "weui-miniprogram/slideview/slideview"
}
  • 点击组件使用查看,uni-app本身自带组件库,微信扫描下方二维码查看小程序示例(包括内置组件、接口、拓展组件、模板)

    image

  • 这里我们同时导入了第三方组件库uView
    微信扫描下方二维码查看小程序示例(包括组件、工具、模板)

    image

API

详细文档

  • uni-app中,相对于微信小程序,使用uni代替了wx,如下示例代码。
  • 注意如果项目只运行于微信小程序,使用wx或者uni都可以,如果是运行于多端必须使用uni
wx.request({
  url: 'https://www.example.com/request',
  success: (res) => {
    console.log(res.data);
  }
});

uni.request({
  url: 'https://www.example.com/request',
  success: (res) => {
    console.log(res.data);
  }
});

插件市场

插件市场地址
在插件市场中有丰富的各类模板和组件,自行按需导入(使用HBuilder X可视化新建的项目,可以在插件地址中选择使用HBuilder X导入插件,方便快捷)

你可能感兴趣的:(uniapp开发微信小程序)