微信小程序入门到实战(一)

了解小程序

  • 什么是小程序?

小程序其实就是一个工具,为人提供便捷服务的;随时可用,用完即走,减少桌面上面的app数量;

B2C(人与商品) 淘宝 JD
P2P(人与人)微信 QQ
C2P(人与服务)微信小程序 支付宝小程序
  • 什么应用适合小程序?

对于一些性能要求不高,使用频度不高,业务逻辑简单的应用适合做成一个小程序的应用;比如购票,缴费,手机充值等

小程序的文件结构

一个小程序首先有四个应用入口文件:

  • app.js:设置一些项目的全局变量
  • app.json:每一个新页面都必须在这个地方注册,项目的导航栏和窗口界面设置有关的
  • app.wxss:项目全局样式
  • project.config.json:项目配置文件

一个页面主要是包含以下四个文件,这四个文件的名字应该都是一样的,最好以页面所在的文件夹名字为标准:

    • xxx.wxml:页面的结构
    • xxx.wxss:页面的样式
    • xxx.json:页面的配置文件
    • xxx.js:页面的脚本文件

      页面可以嵌套页面,但是建议不要超过5个层级。

    移动设备的分辨率与RPX

    小程序推荐使用 rpx为单位,这样就可以在任意屏幕下面实现自适应

    小程序是移动端的开发,所以要注意像素的使用。

    • pt:视觉单位(长度单位),与设备的屏幕物理尺寸有关系,也叫做逻辑分辨率(逻辑单位),与移动端的栅格渲染有关
    • px:通常说的像素点,物理分辨率,随着屏幕的变化不会变化;一般设计师给的设计稿是以物理分辨率为单位的,也就是说,iPhone6下的分辨率是375,但是设计图却是750;因为rpxpx == 2:1,小程序的设计稿就要以iPhone6为参照。

    ptpx之间的关系:1个pt下面包含多个px;也就是说一个逻辑分辨率包含多个物理像素点。
    ppI(DPI):计算的是屏幕显示1个逻辑分辨率包含多个物理像素点,值越大,显示的图像越细腻,清晰。计算的方法是:320*320+480*480的和开根号再处于屏幕尺寸最后乘以reader值
    reader值:视网膜屏,表示一个逻辑像素点包含多个(reader值)物理像素点,一般reader值为2就达到了眼睛的所能观察到细腻的极限,再大几乎不怎么起作用,对于眼睛感觉到的色彩来说。

    也就是说,当需要的元素大小适应屏幕尺寸,就选择rpx作为单位,否者使用px作为单位。

    第一个小程序页面

    • 新建一个项目,选择无AppID ,保存

    • 新建一个页面

    我们可以直接在项目的app.json中的pages属性下面按照此方式创建页面,保存,就可以在左边看到一个以welcom名字的文件夹,包含了页面所需要的四种文件,省略手动在app.js里面注册,并且里面都已经自动配置好了一些设置,防止出现下面的错误:

    解决办法就是在相对应的页面js空文件中调用一下page({...})方法,相当于注册一下,注册的时候只需要写页面的名字,不需要区别是那种页面类型。所有该页面的方法都在page({...})方法里面执行

    app.jsonpages这个属性里面的数组元素,谁出现在第一个位置,就是小程序的启动页面。
    json类型的文件里面不能写注释,否者会报文件解析错误。

    小程序里面使用view标签作为容器,分割文档的作用,类似于在html中使用的div

    text标签是一个文本标签,只有当文字被这个标签包裹起来的时候,才能在手机上面长按选中,这个标签支持转义字符的解析。

    编写wxml代码

    
      
      icessun
      
        开启小程序大门
      
    

    其实在wxml中编写页面骨架的时候,注意小程序默认在我们编写的骨架外面包裹了一个page标签,可以通过这个标签来设置整屏的颜色。

    在小程序里面呢,一般都使用flex布局,弹性盒子模型

      display: flex;
      flex-direction: column;
      align-items: center;

    这样第一个小程序页面我们就编写好了,保存运行一下,就可以看到效果,前提是把这个页面设置为启动页,因为我们还没有写页面跳转。

    页面周期函数

    在上面新建页面的时候,我们发现在js文件里面会自动在page()方法中生成一些方法,如下:

    一般页面启动,会首先调用这三个函数:onLoad(页面加载,一个页面只会调用一次)----->onShow(页面显示,页面每次打开都会调用)----->onReady(页面完成初次渲染)

    page()函数中的data:{ }属性,通常是保存页面需要绑定的数据,一般在里面设置一个变量,用来接收从服务器加载来的JSON数据,然后在通过数据绑定的方式绑定到页面上面。

    app.js的生命周期

    app.js是关于整个小程序项目的方法和属性,类似页面Page({...})函数,也需要一个外层函数包裹App({ ...})

    App({
      //当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
      onLaunch: function () {
    
      },
      // 当小程序启动,或从后台进入前台显示,会触发 onShow
      onShow: function (options) {
    
      },
      //当小程序从前台进入后台,会触发 onHide
      onHide: function () {
    
      },
      // 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
      onError: function (msg) {
    
      }
    })
     // 应用程序的全局变量
      globalData: {
        g_isPlaying: false,
        //  记录当前页面是否播放
        g_currentMusicPost: null,
        //  电影api地址
        doubanBase: 'https://api.douban.com'
      }

    当然也可以在里面设置一些全局的变量,然后在其他页面对应的js文件中通过下面的方式来获取到里面定义的全局变量。

    var app = getApp();  
    var globalData = app.globalData

    你可能感兴趣的:(移动应用开发,微信小程序)