一直想开发一个自己的小程序,终于动工了.

前端框架用的taro,因为可以打包成多个端的小程序.

taro已经更新到2版本了,但是试了下beat版,生成的脚手架在打包小程序时不能编译scss,不知道这是个bug还是需要自己配置什么,所以先降到了1.3.29版本.安装及生成项目:

yarn global add @tarojs/cli@1.3.29
taro init myApp

生成项目后开始开发,在引入背景图片时报错:

这是因为在小程序的样式中,默认是不能引用本地资源的,因为小程序对打包后的包大小有限制,Taro为了方便开发,提供了把本地资源转换成base64的形式进行加载,Taro的默认配置是会对10kb以下的资源进行转换,如果需要需改限制大小可以在config/index.js中修改.

// 小程序端样式引用本地资源内联
url: {
  enable: true,
  config: {
    limit: 10240 // 设定转换尺寸上限
  }
}

所以小的图标可以放在项目中转换成base64加载,大的图片资源需要放到静态资源服务器上,我选择的是阿里的oss服务.

1.首先登陆阿里选择oss产品,进行购买,我选择的是标准版,因为满足需求也不贵.

2.购买完成后,下载oss官方提供的图形管理界面ossbrowser. mac版 win64版 win32版

3.打开ossbrowser,需要登陆.

4.打开RAM访问控制, 点击新建用户,输入用户名,生成AccessKeyId和AccessKeySecret,生成之后要保存下来,不然以后不容易找到.

5.填写AccessKeyId和AccessKeySecret,并勾选https加密,登陆ossbrowser.

6.登陆进去后,新建Bucket,新建完成后就可以上传图片了.

7.上传完成后有一个获取地址的按钮,但是这个地址是用于下载的地址,并不能直接访问,这是oss的一个安全侧略,并不能直接用oss的地址访问.此时我们需要配置自己的域名完成访问.

8.打开阿里oss控制面板,选择Bucket,进入域名管理,绑定用户域名,如下图,如果你的域名是在阿里备案的,那还简单一点,直接勾选上自动添加CNAME记录,然后确定,就能生效了,如果不是在阿里备案,还需要其他的配置,因为我的域名是在阿里备案的,其他的配置就不了解了,可以自行查看oss文档.

9.配置完成后,检测是否生效,ping你绑定的域名,如果看到自动跳转到xxx.oss-cn-hangzhou.aliyuncs.com了,说明生效了,此时在浏览器打开域名+文件名看是否能加载图片了.如果出现这样的错误:

You have no right to access this object because of bucket acl.这句话的意思是你没有权限,因为bucket的acl设置,那么我们可以在oss的基础设置中,把权限设置成公共读.

此时再打开图片地址,就可以访问了.