初识uniapp（微信小程序）

偷偷努力的优乐美
821 阅读8分钟

微信小程序开发工具

  • HbuilderX

  • 微信开发者工具

  • HbuilderX关联微信开发者工具

    运行->运行到小程序模拟器->运行设置

注册微信小程序ID

微信公众平台官网首页（mp.weixin.qq.com)

注册选择类型组织机构类型
个人 18岁以上有国内身份信息的微信实名用户
企业类型个人独资企业、企业法人、企业非法人、非公司制企业法人、全名所有制、农民专业合作社、企业分支机构、合伙企业、其他企业个体户，个体工商户、个体经营
媒体类型事业单位媒体、其他媒体、电视广播、报刊、杂志、网络媒体等
其他组织免费类型（基金会，政府机构驻华代表处）
 社会团体（社会团体法人、社会团体分支、代表机构、其他社会团体、群众团体）
 民办非企业，学校，医院等 
其他组织 （宗教活动场所、农村村民委员会、城市居民委员会、自定义区、其他未列明的组织机构）
政府单位事业单位（事业单位法人、事业单位分支、派出机构、部队医院、国家权力机关法人、其他事业单位）
政府机关(国家行政机关法人、民主党派、政协组织、人民解放军、武警部队、其他机关)

uniapp框架

  • 数据缓存

数据缓存API说明
uni.setStorage(OBJECT)将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
uni.setStorageSync(KEY,DATA)将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
uni.getStorage(OBJECT)从本地缓存中异步获取指定 key 对应的内容。
uni.getStorageSync(KEY)从本地缓存中同步获取指定 key 对应的内容。
uni.getStorageInfo(OBJECT)异步获取当前 storage 的相关信息。
uni.getStorageInfoSync()同步获取当前 storage 的相关信息。
uni.removeStorage(OBJECT)从本地缓存中异步移除指定 key。
uni.removeStorageSync(KEY)从本地缓存中同步移除指定 key。
uni.clearStorage()清理本地数据缓存。
uni.clearStorageSync()同步清理本地数据缓存。。

  • 网络

    1. 发起网络请求： uni.request(OBJECT)

    2. 接口拦截器：

    方法一：封装myRequest utils/api.js,封装后需在main.js中Vue.prototype.$myRequest挂载。

    方法二：

  • vuex引入

    1. 目录结构： store -> index.js

    2. main.js:

    import store from './store';
const store = new Vue({
   store
})

  • uni-ui组件库引用

    1. npm引入 需要下载sass、sass-loader（费劲）

    2. hbuilderX新建项目的时候选择uni-ui项目模板 在dclould插件库中下载sass 无需import和注册直接使用。easycom组件规范将其精简为一步

  • 关于引入scss

    1. 全局引入样式： 在App.vue定义

    2. 局部样式：在pages目录下的vue文件中定义

    3. 关于uni-app框架中的 uni.scss文件 uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。

  • 关于引入图标

    微信小程序中引入外部图标或矢量图，只能通过设置背景图片background-image：url("base64转码后的代码")

  • 文件夹结构介绍

文件名配置内容
pages.json对uni-app进行全局配置（决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar） ,easycom
manifest.json应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
package.json增加uni-app扩展节点，可实现自定义条件编译平台（如钉钉小程序、微信服务号等平台）。
vue.config.js可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项。
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData应用生命周期仅可在App.vue中监听，在页面监听无效。
uni.scss为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置
main.js是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。首先引入了Vue库和App.vue，创建了一个vue实例，并且挂载vue实例。
envCLI 创建的项目中可以在根目录中放置 .env 文件来指定环境变量

  • 路由配置

    1. uni.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
    2. uni.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。
    3. uni.reLaunch(OBJECT)：关闭所有页面，打开到应用内的某个页面。
    4. uni.switchTab(OBJECT)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
    5. uni.navigateBack(OBJECT)：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
    6. uni.preloadPage(OBJECT)：预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

  • 生命周期

    1. 应用生命周期 | 函数名 | 说明 | | --- | --- |
      | onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） | | onShow | 当 uni-app 启动，或从后台进入前台显示 | | onHide | 当 uni-app 从前台进入后台 | | onError | 当 uni-app 报错时触发 | | onUniNViewMessage | 对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯 | | onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数（2.8.1+） | | onPageNotFound | 页面不存在监听函数 | | onThemeChange | 监听系统主题变化

    注意

    • 应用生命周期仅可在App.vue中监听，在其它页面监听无效。

    • onlaunch里进行页面跳转，如遇白屏报错，请参考ask.dcloud.net.cn/article/359…

    • onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

    1. 页面生命周期

      函数名说明
      onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
      onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
      onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
      onHide监听页面隐藏
      onUnload监听页面卸载
      onResize监听窗口尺寸变化
      onPullDownRefresh监听用户下拉动作，一般用于下拉刷新，参考示例
      onReachBottom页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
      onTabItemTap点击 tab 时触发，参数为Object，具体见下方注意事项
      onShareAppMessage用户点击右上角分享
      onPageScroll监听页面滚动，参数为Object
      onShareTimeline监听用户点击右上角转发到朋友圈
      onAddToFavorites监听用户点击右上角收藏

    2. 组件生命周期 vue生命周期

引入插件

组件

  • 基础组件

  • 扩展组件。uni-ui

    1. easycom组件规范 只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。

    比如前述举例的uni-rate组件，它导入到uni-app项目后，存放在了目录/components/uni-rate/uni-rate.vue 同时它的组件名称也叫uni-rate，所以这样的组件，不用在script里注册和引用

    1. uni_module规范

真机模拟

工具会将本地代码进行处理打包并上传，就绪之后，使用手机客户端扫描二维码即可弹出调试窗口，开始远程调试。

进入途径

打包&发布

  • 打包 微信开发者工具中 上传 按钮

ljx1.png 如果按钮不可点原因在于当前小程序没有设置小程序ID ljx3.png

ljx2.png

  • 接口地址域名配置 配置上线服务器域名 ljx4.png

关于上传白页问题

步骤：上传为体验版->微信公众平台登录管理员账号->管理->版本管理-开发版本->设置为体验版 此时在版本号下方可以看到生成的二维码 怀着激动的心开始扫码发现白页.... 接着百度：

  • 打开手机右上角三个点打开开发调试，控制台报错 发现为dist影响(框架模板在下载的时候dist就有，为删除，我I在上传的时候就会有影响)，删除dist文件重新上传，解决。
  • 还有说用了不规则的语法的，因为小程序中没有dom的概念，所以有getElementById类似字符的都会有影响。
  • 还有说降低开发者工具基础库的。
  • 再者就是域名问题。 由于这版只是开发组件，未涉及接口问题，后续遇到问题再来补充，最重要的还是要看开发调试控制台，具体问题具体分析。
avatar
文章
阅读
粉丝