高手uni-app小程序心得

最新推荐文章于 2023-11-21 11:32:05 发布

Gz是高手

最新推荐文章于 2023-11-21 11:32:05 发布

阅读量424

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/Gzzzzhj/article/details/125597703

版权

1. 认识小程序

1.1 语言及开发工具
首先，小程序类Web，但不同于我所认识的HTML，他有属于自己的开发语言及工具：

JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js。它运行在微信 App 的上下文中，不能操作 Browser context 下的 DOM，也不能通过 Node.js 相关接口访问操作系统 API。
WXML: 作为微信小程序的展示层，并不是使用 Html，而是自己发明的基于 XML 语法。
WXSS: 用来修饰展示层的样式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。”
小程序开发工具，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
1.2 入口文件
小程序主要包含以下三个入口文件:

app.js 这个文件是整个小程序的入口文件, 我们主要做了网络检测、用户信息获取等；当然也可以注入公用的方法在其他页面中去通过getApp()调用（注：页面中调用app.js中的方法时不需要通过require或者import引入）
app.json 这个文件可以对小程序进行全局配置，决定页面文件的路径，整体窗口表现、设置网络超时时间、设置多tab等。
app.wxss 是小程序的公共样式表

2. 项目开发

2.1 生命周期
当然,微信小程序和其他前端框架类似也是有生命周期的:

Page({
/**
* 页面的初始数据
*/
data: {},
 
/**
* 生命周期函数--监听页面加载（像首页数据请求可以放在这里）
*/
onLoad: function (options) {},
 
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
 
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
 
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
 
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
 
/**
* 页面相关事件处理函数--监听用户下拉动作（这里添加了下拉刷新的功能）
*/
onPullDownRefresh: function () {},
 
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
 
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})
当我们在data中初始化的值需要修改时,可以在各生命周期及方法中通过setData()修改。由于小程序的入口页面就是首页，在首页添加了用户登录和网络状态的检测在onLoad中。

2.1 tabBar

tabBar即小程序的底部导航栏，由于微信的限制，最少2个最多5个导航栏，只可设置文案、图标。

2.3 样式

小程序样式采用WXSS语言（具有CSS大部分特性）。他也提供了一种新的单位rpx（可根据屏幕宽度自行适应）。官方规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素，既然这样我们也推荐了我们设计师采用iPhone6作为设计标准，即750px宽度。

但是在实际的开发过程中如果字体大小也使用rpx做单位的话，在iPhone6 Puls上显示文字过大，影响美观。后经过测试采用了px做单位，即原设计稿尺寸的一半+px，这样可以保证文字大小在各设备中保持一致。

2.4 网络状态
在官方文档上有明确规定，本地资源是无法通过CSS获取的，图片的话只能使用网络资源或base64方式。首页有个需要判断网络状态的需求，由于断网情况下无法获取网络资源，最后就使用了base64的方式。

官方获取网络状态的API是getNetworkType为异步接口，通过它的返回结果再进行下一步（是显示无网络还是调用数据列表接口），说到这里大家都知该怎么办了——Promise，具体封装如下

new Promise((resolve, reject) => {
  let req = wx.getNetworkType({
    success: function (res) {
      var networkType = res.networkType;
      if (networkType === 'none') {
        resolve(false)
      } else {
        resolve(true)
      }
    },
    fail() {
      reject(false)
    }
  });
})

3. 调试

调试的时候最大的问题呢是：无论是开发者工具上还是手机上，记得先把缓存删干净再测。特别是开发者工具每次切换host都要清理缓存，再重新打开，而且出现bug的时候尽量多测几次，进行反复确定。不然的话，你可能会发现，本来测好的功能又出现问题了，或者是本来有问题的部分又没有问题了。

3.1 开发者工具

开发者工具调试界面和Chorem浏览的开发者工具类似，调试工具分为 7 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace。

3.2 真机调试
在开发环境下手机调试需要满足以下条件：

必须使用开发者账号微信打开
手机需要配置代理（常用charles或fiddler进行代理）
在开发者工具中：设置—代理—代理设置—手动设置代理（填写本机ip127.0.0.1，端口号：8888）
手机扫码（通过开发者工具预览生成二维码），点击右上角--打开调试手机上调试也可以有类似开发者工具一样的调试体验，可以看到Log、System、WeChat、WXML等，也可以看到页面的性能数据。总体来说还是挺齐全的。
————————————————
版权声明：本文为CSDN博主「hswwqy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hswwqy/article/details/125473534

宽度三等分方法:

width:calc(100% / 3)

页面跳转:

tabBar页面 uni.navigateTo

非tabBar页面 uni.switchTab

页面一加载就能渲染的钩子函数:

onLoad()

v-if,v-for在uni.app中不冲突,可以在一个view中同时使用

关于分包:

我们可以将tabBar页面放在主包当中,非tabBar页面放在分包当中,创建分包的时候要在项目根目录中,创建分包的根目录。同时在pages.json中,和pages节点平级的位置声明新的节点,我们把新的节点叫做subpkg。结构如下:

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {}
    },
    {
      "path": "pages/cate/cate",
      "style": {}
    },
    {
      "path": "pages/cart/cart",
      "style": {}
    },
    {
      "path": "pages/my/my",
      "style": {}
    }
  ],
  "subPackages": [
    {
      "root": "subpkg",
      "pages": []
    }
  ]
}

关于指定商品页面跳转:

特有的商品跳转到特有的页面,根据商品的id来跳转,在goods_id上等于一个特有的值即可。

:url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id"