半天入门微信小程序！

很晚很晚了
297 阅读8分钟

微信小程序快速上手

1、微信小程序构成

  • wxml （类比于html）
  • wxss （类比于css）
  • JavaScript （和传统js文件一样）
  • json （配置文件）

2、项目结构

  • pages

    • index文件夹

      • wxml
      • wxss
      • JavaScript
      • json （这个这个页面的配置文件）

  • utils

  • utils帮助文档的js（可选）

  • app.js 全局入口文件

  • app.json 全局配置文件

  • app.wxss全局样式文件

  • project.config.json 这里面的内容和微信开发者工具详情里面的内容是一致的，可以修改内容进行配置

  • sitemap.json 配置小程序及其页面是否能被微信搜索到（只在发布的时候用得到）

3、app.json里面的一些个配置项见官方文档。

  • 其中在微信开发者工具中pages部分添加一个路径，会自动帮你生成目录；
  • window的话主要是navigationBar相关的样式配置，其中enablePullDownRefresh可以开启下拉刷新，backgroundTextStyle对于下拉刷新样式进行配置。其中对于颜色的设置的话微信只支持十六进制的颜色值！
  • tabBar可以配置下方的tab栏，其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。

4、数据绑定

在微信里面div、span这些标签就不再适用了，我们需要使用微信提供的标签，其中view就相当于div，text就相当于span。

对于数据绑定呢，如果你之前学过vue或者其他的框架应该不陌生，就是在js的data里面定义一个数据，然后在wxml里面用{{}}来接收这个数据。

注意： 当我们使用布尔类型充当属性的时候，一定要注意字符串和花括号之前一定不要有空格，否则会导致识别失败 ，例如:

<checkbox check="   {{isChecked}}"> </checkbox>  

//其中isChecked为布尔值，在data中定义为false

5、运算

运算 => 表达式

可以在{{}}中加入表达式

表达式：指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算 。。

  • 数字加减
  • 字符串的拼接
  • 三元表达式

语句：指的是复杂的代码段

  • if else
  • switch
  • do while
  • for

语句是不能直接放到表达式里面的！！！

6、列表渲染

关键：wx：for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:for 也可以嵌套，下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>
​

注意： 1、当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<view wx:for="array">
  {{item}}
</view>
​
就等同于
​
<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

注意：2、 花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view> 
​
就等同于
​
<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>

Wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

  1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

7、条件渲染

wx:if = "{{true/false}}" --->双花括号一定要用""包裹起来

  • wx:if
  • wx:elif
  • Wx:else

hidden

  • 在标签上直接加上熟悉hidden
  • hidden = "{{true/false}}"

使用场景： wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

8、事件绑定

情景描述：点击+按钮数字加一，点击 - 按钮数字减一。

实现：

  • 需要给input标签绑定input事件，绑定关键字 bindinput

  • 如何获取输入框的值？通过事件源对象来获取e.detail.value

  • 把输入框的值赋值到data当中，不能直接this.data.num = e.detail.value/this.num = e.detail.value

    正确的写法是this.setData({

    num:e.detail.value //通过对象的方式来赋值

    })

事件绑定参数的传递：

在小程序中不能像我们之前一样，在方法名后的括号里面直接传参。比如bindtap="handletap(1)",这样是错误的，微信小程序会把handletap(1)当成一个整体，导致出错。

我们需要：

  • 加入一个点击事件 bindtap
  • 无法在小程序当中的事件中直接传参的
  • 通过自定义属性的方式 data-自定义属性名
  • 事件源（e）中获取自定义属性

9、样式wxss

  • 尺寸单位

    • rpx -->可以根据屏幕宽度自适应。规定屏幕宽度为750 rpx，比如在iphone6上屏幕宽度为375px共有750个物理像素，则750px = 375 rpx，1 rpx = 0.5px = 1 物理像素。

  • 样式导入

    • 样式通过@Import导入
    • 路径只支持相对路径

  • 选择器

    • 小程序里面不支持*通配符，所以以下代码无效
    *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

  • 预处理器

    • less预处理器

    • 如果使用的是vscode编译器的话，我们需要先安装easy less插件，然后在setting.json中进行配置

      "less.compile":{

      "outExt": '.wxss'

      }

    //1、使用less定义变量    
@color：yellow
  //2、使用变量
  text{
    color:@color
}
    • less文件天生支持import导入

10、常见组件

  • view ---div

  • text ---span 里面只能嵌套text 、只有这个标签可以实现长按文字 复制、可以对回车、空格进行识别

  • image

    • 腾讯规定打包上线的项目大小不能超过2M，所以很多资源我们都需要把它放到网上，所以当我们要使用图片的时候我们默认使用外网的图片；
    • 我们的图片是存在默认宽高的，默认宽度320px，默认高度240px；
    • 其中image里面的mode属性来决定我们的图片内容如何和图片标签宽高做适配；
    • 小程序中的图片自动就支持懒加载的lazy-load；

  • swiper（轮播图）

    • 一定要搭配swiper-item使用，最外层是swiper；里面嵌套swiper-item
    • 每一个轮播项是swiper-item，swiper存在默认样式，width：100% height：150px；
    • swiper的高度无法由内容撑开，所以需要我们先找出来原图的宽高，然后再等比例的给swiper定宽高；

  • navigator导航组件

    • 类似超链接标签 --里面有一个url是要跳转的路径，可以放绝对路径和相对路径；
    • 块级元素，会自动换行，可以加宽度和高度；
    • target属性--可以跳到当前小程序的页面或者其他小程序的页面 self 默认值 是当前的小程序，miniProgramma；
    • open-type 跳转的方式

  • rich-text（富文本）

    • 可以将字符串解析成对应标签类似于vue中的v-html功能

    • nodes属性来实现

      • 接收标签字符串
      • 接收对象数组

  • button标签 ---开放能力 open-type

    • contact ：打开客服会话 ---只能真机调试打开
    • share ：转发当前小程序 ---只能发给朋友，不能发到朋友圈
    • getPhoneNumber ：获取当前用户的手机号，要结合一个事件来使用，必须是企业才可以获取
    • getUserInfo ：获取当前用户信息
    • lanuchApp：在小程序中直接打开app ---需要先在app中通过app的某个链接打开小程序，在小程序中再通过这个功能重新打开app
    • openSetting：打开小程序中默认的授权页面 --授权页面中只会出现用户曾经点击过的权限
    • feedback：打开小程序中内置的意见反馈 -- -只能真机调试打开

11、自定义组件

  • 创建组件

    • 自定义组件也是由四个页面构成，在components里面建好文件夹之后，在微信开发者工具操作台左上角点击➕或者鼠标右键，选择新增components就自动建好啦~

  • 声明组件

    • 哪个页面要用这个自定义组件，就在他的json文件中声明。在usingComponents:{ "组件名"：相对路径}

  • 在页面中使用组件

    • 在wxml中通过标签的方式使用组件
avatar
文章
阅读
粉丝