小程序开发篇:实战(一)

·  阅读 143
小程序开发篇:实战(一)

最近在学习小程序开发,整理了一下今天学到的一些东西:

  1. app.json文件中,排在pages属性(是一个数组)的第一个路径就是打开小程序时最先展示的页面

  1. pages文件夹的每一个页面下,都会有一个配置文件即json文件,我们可以为里面的对象添加属性用于给当前页面做一些配置,比如navigationBarTitleText,这个属性就是控制小程序上方显示的标题文字内容

  1. app.wxss是全局样式配置,我们一般都在每个页面对应文件夹中的wxss文件里面写对应页面的样式,这些样式只会在对应页面中才会生效,不用担心污染到其他页面。一般我们会把一些公共的样式抽取出来方放置在app.wxss中吗,这样要使用的时候直接添加为对应的标签添加上这个类名即可

  2. 像是一些静态资源,比如说图片什么的,我们一般会在外层新建一个assets文件夹用于存储

  3. 在设置背景图片的时候要格外注意,不能将本地的地址(绝对路径或者相对路径)直接作为url路径。正确设置方法:

  • 使用线上的图片,我们可以提前将图片上传到线上,然后将路径带有前缀http的地址赋值给background属性的url
  • 将图片转成base64编码,然后把编码赋值给background属性即可(这个编码是很长的,所以不推荐大量使用该种方法展示图片)
  • 当然展示图片还可以使用小程序的image组件,这个组件跟以前我们使用过的img标签很像,只需在src属性中输入路径即可正确显示图片,本地路径、线上路径、base64编码等等都可以正常显示
  1. image组件中可以传一个mode属性进去,这个属性是控制图片裁剪、缩放的模式的,我们主要使用的有两个属性值,一个是aspectFit,另一个是aspectFill。原因很简单,这两个属性值都是保持图片纵横比缩放的,显示出的图片相对来说比较自然,但两者还是有差别的:
  • aspectFit:简单理解就是将这个图片先等比例放大或收缩,其中某一个边以达到要求就立即停止放大或收缩
  • aspectFill:简单理解就是将这个图片先等比例放大或收缩,等到两个边都达到要求了之后才会停止放大或收缩
  • 最终我们看到的图片都是上述变化过后的图片居中的部分,所以有时候用户的设备越大,看到的图片内容也就会越多

  1. 如果我们想让用户点击了某个标签之后执行某些操作或者是跳转到某个页面,那么就可以组件中添加bind:tap属性,属性值可以填写要执行的函数名称,函数写在Page方法传入的对象中。注意一定要是一个字符串,因为其会自动到对象中根据这个属性名寻找对应的方法
<view class="login-btn" bind:tap="toLogin">登录</view>
复制代码

顺便提一嘴,在小程序中我们可以在任何地方拿到wx这个全局对象,并可以调用在它身上的接口,比如说下面代码中的navigateTo方法,其可以接受一个对象:

navigateTo作用:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

Page({
  toLogin() {
    wx.navigateTo({
      url: '../login/login',
      success() {
        console.log('success');
      }
    })
  }
}
复制代码