微信小程序开发入门（框架）

最新推荐文章于 2024-02-28 16:24:48 发布

DanownWang

最新推荐文章于 2024-02-28 16:24:48 发布

阅读量271

点赞数

分类专栏：小程序开发基础文章标签：小程序微信

本文链接：https://blog.csdn.net/Danown/article/details/120706883

版权

小程序开发基础专栏收录该内容

5 篇文章 2 订阅

订阅专栏

小程序配置

全局配置

小程序根目录下的 app.json文件用来对微信小程序进行全局配置，文件内容为一个 JSON 对象，常用属性：

pages 页面路径列表
window 全局的默认窗口表现
style 指定使用升级后的weui样式
sitemapLocation
指明 sitemap.json 的位置；默认为 ‘sitemap.json’ 即在 app.json 同级目录下名字的 sitemap.json 文件
tabBar tab 栏的表现

tarBar

color tab上文字颜色，只能为16进制
selectedColor tab上文字被选中的颜色
backgroundColor tab上文字背景的颜色
list（tab 的列表）
pagePath 页面路径，必须在 pages 中先定义
text tab按钮文字

"tabBar":{
    "color":"#c30",
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"首页",
        "iconPath":"pages/img/home.png",
        "selectedIconPath":"pages/img/home.png"  //为了让图片被选中时也能呈现
      },
      {
        "pagePath":"pages/logs/logs",
        "text":"日志",
        "iconPath":"pages/img/log.png",
        "selectedIconPath":"pages/img/log.png" 
      }
    ]
  },

页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，常用属性:

navigationBarTitleText 导航栏标题文字内容
backgroundColor HexColor 窗口的背景色
backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh 是否开启当前页面下拉刷新 true / false

sitemap配置

详见

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#sitemapLocation

wxml 语法参考

数据绑定

可以在js文件中的data里写对象，数组，数值等任何数据类型，然后渲染到wxml

<!--wxml-->
<view> {{message}} </view>

<view>
  {{obj.name}} - {{obj.age}}
</view>

<view>
  {{listArr[0]}} - {{listArr[1]}}   //全部输出 直接{{listArr}}
</view>

// page.js
Page({
  data: {
    message: 'Hello MINA!',
    obj:{name:"DanownWang",age:18},
    listArr:["钟离","公子"]
  }
})

if条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> Danown </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

结果：显示“Danown”

for列表渲染

注意： wx.for 循环只能是数组

eg：让view标签出现10次

<view wx:for="{{10}}">达达利亚永别冬都了</view>

wx:for-item 可以指定数组当前元素的变量名
wx:for-index 可以指定数组当前下标的变量名

index 索引值
item 数组中的每一项

<view wx:for="{{[111,222,333,444]}}">{{index+1}}.{{item}}</view>

执行代码：
在这里插入图片描述
在wxml页面上，wx:for里面无法放其他类型的字段

于是，在js中可以：

Page({
    data: {
        arr:["钟离","公子","凯亚","迪卢克"]
    },
}),

wxml

<view wx:for="{{arr}}">{{index+1}}.{{item}}</view>

执行代码：
在这里插入图片描述

循环遍历

数组里传入对象，通过"."引用对象

//wxml
<view wx:for="{{arr}}" wx:key="index">
  {{item.peo}}- {{item.s}}
</view>

wx:key="index"
如不提供 wx:key，会报一个 warning，加上去编译器无警告错误

//js
    data: {
        arr:[
            {"peo":"钟离","s":"岩"},
            {"peo":"公子","s":"水"},
            {"peo":"迪卢克","s":"火"}
        ]
    },

一开始，“peo"我是写"角色”，发现抱错，因此替换成英文

框架接口

page内的生命周期及各项函数

data 页面的初始数据
onLoad 生命周期回调—监听页面加载
onShow 生命周期回调—监听页面显示
onReady 生命周期回调—监听页面初次渲染完成
onHide 生命周期回调—监听页面隐藏
onUnload 生命周期回调—监听页面卸载
onPullDownRefresh 监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角转发

具体看文档

事件函数及setData用法

bindtap事件绑定
setData函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）

eg：设置一个点击事件，将蓝色框中的 “开端” 文字点击一下变成 data-nam 里的文字。

wxml

<view bindtap="btn" data-nam="结尾"
      style="width:200rpx;height: 200rpx;background: blue;">
  {{name}}
</view>

Page({
    data: {
       name:"开端"
    },

    btn(res){
        var na = res.currentTarget.dataset.nam
        this.setData({
            name:na
        })
    },
})