微信小程序开发基础要素-CFANZ编程社区

微信小程序开发基础要素

小程序开发基础要素：
1 去微信公众平台注册微信小程序账号并且开发设置获取对应appID
2 需要安装微信开发者工具

在微信开发者工具中选择基础模板javascript 后台服务选择不使用云开发
自动生成一个微信小程序的项目目录：
pages pages文件中存放了当前项目中所有页面
index index文件夹是自己是根据需求自己创建的页面文件夹每一个页面文件中都包含
四个文件：
js 控制着当前页面的js业务逻辑
wxss 控制者当前页面样式
wxml 当前页面的html结构
json 可以配置当前页面的基本配置项(顶部导航颜色导航文字标题导航栏等等)
utils 可以在当前文件夹中创建js文件并且进行全局调用
app.js 可以作为全局主入口js文件在该文件中设置js 可以作用在全局页面
app.json 全局配置文件
app.wxss 全局样式文件改文件的样式可以作用在全局页面

小程序在编写时候以 iphone6为模板来进行页面的编写这个时候1px=2rpx

微信小程序插值
使用的是根vue一样的插值语法 Mustache 格式还是使用双花括号
格式：
js：
data: {
msg: 111
}

    wxml:
      <组件标签>{{msg}}</组件标签>

微信小程序数据请求
  wx.requset({
    url: ''  // 请求的接口地址
    method: '' // 接口请求方式
    data: {
      // 发送给后台参数
    }，
    success(res) {
      console.log(res)
    },
    fail(err) {
      console.log(err)
    }
  })

  在小程序中设置data数据我们需要使用
    this.setData({
      data属性名： 属性值
    })

  微信小程序 列表渲染
  使用: wx:for 
  格式：  
    <组件标签 wx:for="{{data数据}}" wx:key="index">
      {{item}}--{{index}}
    </组件标签>

  如果渲染的是数组  item对应的就是数组里边每一项    index对应的是下标索引
  item  index是微信小程序系统自动给你的  你可以直接拿来使用的

  有些时候我们进行数据循环的时候 我们不想用官方提供给我们的默认名字 item  index
  这个时候我们可以自定义
    官方提供两个属性  
      wx:for-index="自定义下标索引名"
      wx:for-item="自定义属性名"
    格式：
      <组件标签 wx:for="{{data数据}}" wx:for-index="i" wx:for-item="list" wx:key="i">
        {{list}}--{{i}}
      </组件标签>
    
    wx:for不仅仅可以循环数组  对象
    在循环对象的时候  index对应的是键名  item对应的是键值

0 条评论