微信小程序（一）

最新推荐文章于 2024-11-11 16:31:01 发布

在十三月

最新推荐文章于 2024-11-11 16:31:01 发布

阅读量168

点赞数

文章标签：微信小程序

本文链接：https://blog.csdn.net/qq_42581815/article/details/107272395

版权

微信小程序（一）

**
首先下载好微信小程序开发者工具，然后注册一个微信小程序账号，注册好后找到开发选项中的开发设置，里面有appID的号码，将其输入在微信开发者工具中。可以使用vscode进行代码的编写。

一、文件和目录

程序主体：app.js、app.json、app.wxss、project.config.json
app.js：程序启动时做的事情
app.json：小程序的全局配置
app.wxss：小程序的全局样式
project.config.json：项目的配置文件(个人设置，项目转移后设置不会变化)
页面：index.js、index.json、index.wxml、index.wxss，一个完整的页面由四个部分组成。
index.js：设置页面的逻辑，每个页面的js里面必须包含一个page：{}的对象。
index.json：当前页面的配置，在usingcomponent的花括号里，可以写自定义组件
index.wxml：页面的结构内容(使用的是微信自己的组件，原本html不能使用，因为不是浏览器)
index.wxss：当前页面的样式(wxss实现了大部分css样式，除此以为会有一个新的单位rpx)
全局配置：app.json
pages：页面路径(数组中的每一项对应一个页面路径，文件名后不需要后缀，虽然主页我们写的是index，但实际上哪个路径放在最上面哪个就会默认打开)
window：页面的窗口表现，设置小程序的状态栏，导航条，窗口背景色等
tabBar：底部导航栏，底部tab切换，有个重要的list属性，一个list数组包含2~5个对象，每个对象包含text：按钮名，路径，图片的路径，选中时图片的路径。

 "tabBar":{
	        "color" : "#707070",   //默认颜色
	        "selectedColor" : "#1296db",  //选中颜色(此按钮对应的页面)
	        "list" : [  //哪些tab(2-5个)
	            {
	                "text" : "首页",  //按钮名称
	                "pagePath" : "pages/index/index",  //路径，必须与pages里的路径相同
	                "iconPath" : "common/img/图片名",  //按钮图标
	                "selectedIconPath" : "common/img/图片名" //选中时按钮图标
	            },
	            {
	                "text" : "日志",
	                "pagePath" : "pages/logs/logs",
	                "iconPath" : "common/img/图片名",
	                "selectedIconPath" : "common/img/图片名"
	            }
	        ]
	    }

debug：开启调试(在控制台的info必须打开，当你不需要看调试信息是可以关闭info)
sitemapLocation：小程序爬虫爬取规则

二、注册程序与页面

注册程序：app.js里
App({ //注册程序
onLaunch //程序注册时调用的函数(程序生命周期函数)
gData : { //在程序实例里添加一个gData属性
a : 1
}
})
注册成功后会得到一个程序实例，能被其他页面程序用getApp()访问
注册页面：所有页面的js文件中（如index.js）
const app = getApp(); //在页面js文件中获取程序应用实例
console.log(app.gData); //能够获取程序实例上的属性
Page({ //注册页面
onLoad //页面注册时调用的函数(页面生命周期函数)
pData : { //在页面实例里添加一个pData属性，并保存在当前页面对象(this)上
b : 2
}
})

三、生命周期函数

App的生命周期，设置在app.js中
onLaunch：小程序注册时调用的函数，在小程序运行期间只会执行一次
onShow：后台切换到/启动小程序时调用的函数，每次进入小程序都会执行
onHide：小程序隐藏(到后台)时调用的函数，每次小程序进入后台都会执行
Page的生命周期，设置在page.js中
onLoad：页面加载时调用的函数，只会执行一次
onShow：当前页面显示时调用的函数，每次创建/切换到当前页面时都会执行
onReady：页面第一次渲染完成时调用的函数，只会执行一次
onHide：当前页面隐藏时调用的函数，每次隐藏当前页面时都会执行
onUnload：当前页面卸载时执行的函数，只会执行一次
注意：用tab执行页面间的切换并不会引起卸载和加载，只会让页面显示和隐藏；但是用跳转接口(Navigator组件)时，会让新页面加载，旧页面隐藏；用返回按钮时，回退前的页面会被卸载，回到的页面会显示

四、数据设置

在page.js中设置data属性，它是一个对象，你可以把你需要的数据设置在这里，当你需要在页面page.wxml里面使用它的时候用{{}}小胡子语法来获取它，你不用关心data属性，直接使用data的属性就好

Page({
	    data : {
	        msg : "hello world"
	    }
	})
	<view>{{msg}}</view>

列表渲染
（1）语法wx:for="{{数组}}"(注意这里和vue不一样，即使是属性绑定的值也要用{{}})，默认的下标为index，默认的当前元素为item，当然你也可以用wx:for-index=“新下标” wx:for-item="当前元素的新名字"来修改下标和当前元素名

Page({
    data : {
        names : ["张三","李四","王五"]
    }
})
<view wx:for="{{names}}">{{item}}</view>

（2）使用wx:for的时候为了需要更好的性能，需要设置wx:key来设置每个节点的唯一编号，和react一样，目的是为了让列表元素重新渲染时比对需要重新渲染的节点；注意wx:key不需要用{{}}来设置，直接在"“里设置即可。
（3）wx:key的值必须是不同的值，比如可以用"index”，如果你确定数组中的数据没有重复项也可以用"*this"来设置，更多的时候我们的数据是从后台来的，每个数据会有一个id属性来给wx:key设置位置编号，把上面的数组的数据改成带有id的对象，id值为一个随机数，并将其在page中遍历出来

条件渲染
语法wx:if=“条件”/wx:elif=“条件”/wx:else，如果if条件为真，该标记就会渲染，否则去判断elif的条件，如果都不满足，则渲染else标记

Page({
    data : {
        score : 75
    }
})
<view wx:if="{{score>=85}}">成绩A</view>
<view wx:elif="{{score<85 && score>=70}}">成绩B</view>
<view wx:elif="{{score<70 && score>=45}}">成绩C</view>
<view wx:else>成绩D</view>

列表渲染也可以嵌套，如同我们的for循环；当我们在列表渲染的同时需要渲染很多元素或者判断的时候，可以用block(块)标记将所有需要渲染的元素装进去，一起进行渲染。

Page({
  data: {
    msg : "hello world",
    names : [
      {
        "id" : "001",
        "name" : "张三",
        "score" : 75
      },
      {
        "id" : "002",
        "name" : "李四",
        "score" : 62
      },
      {
        "id" : "003",
        "name" : "王五",
        "score" : 90
      }
    ]
  }
  })
  <block wx:for="{{names}}" wx:key="id">
    <text>{{item.name}}</text>
    <view wx:if="{{item.score>=85}}">成绩A</view>
    <view wx:elif="{{item.score<85 && item.score>=70}}">成绩B</view>
    <view wx:elif="{{item.score<70 && item.score>=45}}">成绩C</view>
    <view wx:else>成绩D</view>
  </block>