初识微信小程序

目录

1.微信小程序项目的目录结构

2.常用的语法

3.样式

4.小程序如何渲染

5.本地存储

---

1.微信小程序项目的目录结构

• pages:
  1. wxml: 编写小程序界面结构的地方
  2. wxss: 编写小程序样式的地方
  3. json：编写界面配置的地方
  4. js：编写界面逻辑的地方
• utils: 编写工具类的地方
• app.js：创建程序实例的位置
• app.json: 编写全局配置地方
• app.wxss: 编写全局样式的地方
• project.config.json: 项目的配置文件
• sitemap.json：配置哪些网站可以被检索到

2.常用的语法

要在页面或者组件的js文件中的data属性上定义数据，

  data: {
      msg:"hello world",
      num: 18,
  },

引用数据：

通过{{ }}的方式渲染到页面中，

小程序任何需要数据的地方都需要用{{ }}，包括标签内的属性

逻辑渲染:

在wxml中,可以用 wx:if={{msg}}的方法来判断是否渲染页面

同时可搭配 wx:elif={{msg}} 和 wx:else 使用 

列表渲染:

用 wx:for控制属性来绑定一个数组，来利用数组中的数据来重复渲染页面，默认下标名为index，元素为item，

<block wx:for="{{newsList}}" wx:key="articleId"> 
//block仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
   <view class="rightBoxs">
       {{item.id}}---{{index}}
   </view>
</block>

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

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

如果需要wx:for嵌套的话，可以wx:for-index="重新定义索引名字" wx:for-item="重新定义元素的变量名字"

3.样式

wxss和css类似，不过也有一些不同之处

在wxss之中，新定义了尺寸属性rpx为了来适应不用宽度的屏幕，在小程序中，规定所有手机的屏幕宽度都是750rpx，所以在不同尺寸的屏幕下1rpx的宽度都不同。

1rpx = （屏幕宽度/750）px

而wxss和css相比，目前支持类选择器，id选择器，元素选择器，伪元素选择器 ::before ::after

子代和后代选择器也可以用

4.小程序如何渲染

 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

渲染层和数据相关。

逻辑层负责产生、处理数据。

逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

5.本地存储

异步存储:

wx.setStorage({
     data: {name:"嗷嗷",age:4},
     //需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
     key: 'list',
     //本地缓存中指定的 key
})

异步操作:

 wx.getStorage({
      key: 'list',
      success(res){
        console.log(res);
      }
    })

同步存储:

wx.setStorageSync('list1', {name:"嗷嗷",age:5})

 同步操作

const list = wx.getStorageSync('list')

缓存的限制和隔离：

不用小程序的本地缓存空间上限为10mb

对不用用户的缓存进行了隔离

用户换设备之后无法在其他设备读取到当前设备数据

学习微信小程序，建议多看官方文档学习，可以在官方文档上查到我们要的所有信息

微信开放文档