小程序入门

2022-03-01 本文已影响0人泪滴在琴上

小程序的特点

适合做简单的、用完即走的应用
适合低频的应用
适合性能要求不高的应用
缺点：不能实现推送，被动的触发模板消息
不能加载外部页面
不能做直播类的，因为不能做多任务的，不适合做停留太久的应用

不适合用小程序开发的软件有：知乎、直播软件、手游
适合用小程序开发的软件有：饿了么外卖类、猫眼、滴滴打车
大型软件的部分功能可以拆成小程序：豆瓣的评论区、美团的外卖、银行的查询

什么是微信小程序？

不需要下载安装即可使用，因为安装包小于1M，安装过程感受不到
用户“用完即走”，不用关心是否安装太多应用
应用将无处不在，随时可用

B2C 人与商品
P2P 人与人
C2P 人与服务这个是小程序用意所在

快捷键

格式调整
　　Ctrl+S：保存文件
　　Ctrl+[， Ctrl+]：代码行缩进
　　Ctrl+Shift+[， Ctrl+Shift+]：折叠打开代码块
　　Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行
　　Shift+Alt+F：代码格式化
　　Alt+Up，Alt+Down：上下移动一行
　　Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行
　　Ctrl+Shift+Enter：在当前行上方插入一行
光标相关
　　Ctrl+End：移动到文件结尾
　　Ctrl+Home：移动到文件开头
　　Ctrl+i：选中当前行
　　Shift+End：选择从光标到行尾
　　Shift+Home：选择从行首到光标处
　　Ctrl+Shift+L：选中所有匹配
　　Ctrl+D：选中匹配
　　Ctrl+U：光标回退

编写第一个小程序页面

小程序文件类型与目录结构
注册小程序页面，view image text等组件的基本用法
flex弹性盒子模型
移动端分辨率及小程序自适应单位RPX

home.jpg

移动设备的分辨率与rpx

pt为逻辑分辨率，pt的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位；
px指物理分辨率，和屏幕尺寸没有关系。因为点没有大小。
1pt可以由1个px构成，也可以有2个px，还可以有3个。
iphone6的1pt有2个px构成
rpx的作用
wxml图片给的宽高是逻辑分辨率，而设计图是物理分辨率。
如何做不同分辨率设备的自适应？
以ip6的物理像素750*1334为视觉稿进行设计，而在小程序中使用rpx为单位
ip6下1px=1rpx=0.5pt
使用rpx，小程序会自动在不同的分辨率下进行转换，而是用px为单位不会。
为什么要用ip6的物理分辨率来做图？
因为好算啊， ip6下1px=1rpx, ip6plus下1px=0.6rpx
不是所有的单位都适合rpx。比如界面有的字体不需要自适应。太小的屏幕文字可能会看不清楚。

注意点：

标签里的属性，设置为true，"true"直接带引号即可。如果要设置为false，需要带上双括号。“{{false}}”。
控制元素是否显示：wx:if="{{true}}"，在脚本里面设置data的值为true或false时，不要带引号。
template组件，一个套一个时，最里面的样式引用写到上一级，上一级再写到上一级。。。
不能直接给template样式，如果要的话，给template外加上view
template是不执行js的，template里面如果有方法，需要找到父级不试template的页面

快捷键：

alt+shift+f 格式化代码
ctrl+p 快速搜索文件
wxml格式化代码的时候右键：格式化代码即可

知识点：

1、调用全局变量
2 、点击更多，如何知道你点击的是那一类型的更多
3、一个js文件里面多个方法共享一个变量，知识点在more-movie.js里面

页面跳转

1、 wx.navigateTo({
这个会自带返回，
注意参数是对象，不是字符串
最多是能是5级
页面跳转后执行的是onHode
2、 wx.redirectTo({}）
1、这个没有返回
2、页面跳转后执行的wx.redirectTo({}）

3、完成的流程

    wx.redirectTo({
      url: '../posts/post',
      success:function(){

      },
      fail:function(){

      },
      complete:function(){
         //无论失败或者成功都会执行
      }
    })

事件
bindtap 会冒泡
catchtap

var postData = require('../../data/post-data.js')
//这里只能用相对路径

  data: {
    //小程序总是会读取data对象来做数据绑定，这个动作称为动作A，
    //而这个动作A的执行是在onload事件执行之后发生的
    // posts_key:[],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //页面初始化  options为页面跳转所带来的参数
    // 第一种方式
    // this.data.postsdata = postData.postList;
    // 第二种方式：异步操作必须用setData
    this.setData({
      posts_key: postData.postList
    });
  },

template模板的使用

模板文件的脚本不生效
一般就两个文件wxml和wxss
在页面引入模板：

<import src="post-item/post-item-template.wxml" />

这里既可以用绝对路径也可以用写相对路径
使用的时候：

<template is="postItem" data="{{item}}"/>

这里的is对应的是模板的名字

复用样式的时候：在wxss中引入模板的样式

@import "post-item/post-item-template.wxss";

  <block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx" wx:key="*this">
    <template is="postItem" data="{{item}}"/>
  </block>

在模板文件里面每一项都是item.属性名

优化一下：
把模板里面的item.全部去掉，在页面吧data="{{item}}"改成data="{{...item}}"
...相当于吧对象站牌平铺

template相当于占位符，不能绑定事件，可以在template外面加上view

页面列表每一项有一个postId（注意这里I是大写），但是在点击获取该点击事件对象的postid值i要小写，否则获取postId值是undefined

 <view catchtap="onPostTap" data-postId="{{item.postId}}">
      <template is="postItem" data="{{...item}}" />
</view>

pic.png

1、setData更新数据

this.setData({text:'hello'})

2、组件属性绑定

<view id="item-{{id}}"> </view>