视频链接：https://www.bilibili.com/video/BV1i4411c7dU

一、获取信息

（一）页面创建

1.全局三个文件，分别是app.js app.json（放入{}） app.wxss（名称不可更改）

2.创建Pages目录文件（作用是用来放各个页面的）

3.里面创建index目录,里面新建页面（给页面起名字，并且创建四个文件）
（1）js：页面逻辑实现
（2）json：负责标题栏和一些状态栏
（3）wxml：管理页面有什么
（4）wxss：页面排布

4.把内容单元封装在view内部（wxml）

<button open-type='getUserInfo' bindgetuserinfo='getMyInfo'>点击获取头像和昵称</button>
<!-- open-type='getUserInfo' 表示激活获取微信用户信息功能
bindgetuserinfo='getMyInfo' 表示获得的数据将传递给自定义函数getMyInfo，可以自己取-->

5.wxml变量写法：{{“变量名称”}}

6.js文件中定义变量的方法：在data:{“定义变量”}
规则：变量名称+":"+"’"+内容+"’"
*两个变量之间用","隔开
eg：

data:{name:'Hello World',src:'/image/weixin.jpg'
},

7.js文件中函数的定义方法：
函数名+":"+function(“参数列表(可不写)”){“函数内容”}
*两个{}前后要有“，”

*修改data变量的方法：
this.setData({“修改变量”})
eg:

getMyInfo:function(e){console.log(e.detail.userInfo;let info=e.detail.userInfo;this.setData({name:info.nickName,//更新名称src:info.avatarUrl//更新图片来源})
},

8.json更改标题栏:
window":{
“内容”:“内容”,
…
},

（二）wxss-flex布局

详细介绍：https://www.cnblogs.com/hellocd/p/10443237.html

display:flex;
尺寸单位"rpx"：无视设备原先的尺寸，统一规定屏幕宽度为750rpx。

容器属性：

二、天气小程序

（一）picker

<picker>是从底部弹起的滚动选择器组件，目前根据mode属性值的不同支持五种选择器：普通选择器（默认），多列选择器，时间选择器，日期选择器，省市区选择器。
eg.
*wxml:

<picker mode="region" bindchange="changeRegion">
<view>{{region}}</view>
</picker>

*js:

data:{region:['北京市','北京市','东城区']},
changeRegion: function (e) {this.setData({region: e.detail.value,now: ''})this.getWeather(); //更新天气},

省市区选择器：
value：表示选中的省市区，默认选中每一列的第一个值
bindchange：当value改变时触发change事件，event.detail={value:value}

（二）网络API

和风天气：提供的API接口
根据网站的相关代码提示和接口信息制作url
回到微信公众平台，添加服务器域名
网址：https://dev.qweather.com/docs/api/geo/

1.调用函数：this.“函数名”(参数列表)
eg. this.getWeather();

2.wx.request({
url:
data:
success:function(e){
通常先在控制台输出看一下
}
})
+更改变量值

getWeather: function () {var that = this; //this不可以直接在wxAPI函数内部使用wx.request({ //寻找城市IDurl: 'https://geoapi.heweather.net/v2/city/lookup?',data: {location: that.data.region[2],key: '0cfdce9dc0584872af354d0c6c71118c'},success: function (res) { //如果城市ID找到了，则找对应ID的城市详细信息that.setData({Place_ID: res.data.location[0].id}) //将城市ID用变量存储// console.log(res.data);wx.request({ //寻找城市的详细信息url: 'https://devapi.heweather.net/v7/weather/now?',data: {location: that.data.Place_ID,key: '0cfdce9dc0584872af354d0c6c71118c'},success: function (res) { //如果找到了// console.log(res.data)that.setData({now: res.data.now}) //将详细信息用now存储}})}})},

3.定位

onLoad: function (options) {var that = thiswx.getLocation({success: function (res) {//  console.log(res)var locat = res.longitude.toString() + "," + res.latitude.toString() //字符串：“经度，纬度”that.data.loc = locatwx.request({ //城市信息搜索url: 'https://geoapi.heweather.net/v2/city/lookup?',data: {location: that.data.loc,key: '0cfdce9dc0584872af354d0c6c71118c'},success: function (res) { //成功则找对应经纬度的城市详细信息// console.log(res.data);that.setData({region: [res.data.location[0].adm1,res.data.location[0].adm2,res.data.location[0].name]}) //获取此经纬度的省市区that.getWeather();//后将上面getWeather拆成了两个函数，getWeather只负责寻找城市的详细信息并存储}})}})
},

三、视频小程序

（一）video

<video>是视频组件，可用于播放本地或网络视频资源，其默认宽度为300rpx，高度为225rpx。
——常用属性：
*src：视频资源地址
*controls:是否显示默认播放控件(默认ture)
*danmu-list:弹幕列表
*danmu-btn:是否显示弹幕按钮（默认false
*autoplay loop muted duration initial-time
*bindpause bindplay bindend

（二）for循环数组

在组件上使用"wx:for"控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为"index"，数组当前项的变量名默认为"item"
eg.

data: {list:[{id:'123',title:'第一个视频',videoUrl:''},{id:'456',title:'第二个视频',videoUrl:''},{id: '789',title: '第三个视频',videoUrl:''},{id: '147',title: '第四个视频',videoUrl:''}]},

<view class='videoBar' wx:for='{{list}}' wx:key='video{{index}}' data-url='{{item.videoUrl}}' bindtap='playVideo'><image src='/images/play.png'></image><text>{{item.title}}</text></view>

*使用"wx:for-index"可以指定数组当前下标的变量名
*使用"wx:for-item"可以指定数组当前下标的变量名
eg.

<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>

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

翻译：
在不使用 wx:key的情况下, 如果 array 内的数据发生改变，则会重新创建每个Item对象然后渲染列表（费时费力）
在使用 wx:key的情况下，如果array中的数据发生改变，只是将对应的对象重新排序。未发生变化的对象，不会重新创建(Very good)

四、新闻小程序

1.幻灯片

实现一个带有指示点的滑块视图容器，并且需要自动播放。
<swiper>标签必须配合组件一起使用，该组件是用于切换的具体内容。
<swiper>组件中可以直接放置的只有<swiper-item>组件，否则会导致未定义的行为。
<swiper-item>中可以包含文本或图片，其宽、高默认为100%。

wxml：

<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500"><view wx:for="{{swiperImg}}" wx:key="swiper{{index}}"><swiper-item><image src="{{item.src}}"></image></swiper-item></view>
</swiper>

2.tabBar

*微信小程序的导航栏，在app.json中

"tabBar": {"color": "#000000","selectedColor": "#328EEB","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "images/index1.png","selectedIconPath": "images/index2.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "images/my1.png","selectedIconPath": "images/my2.png"}]},

3.传递参数实现页面跳转

index.wxml:

<view class="news-item" wx:for="{{newsList}}" wx:key="{{item.id}}" bindtap="goToDetail" data-id="{{item.id}}"><image src="{{item.poster}}"></image><text>{{item.title}}————{{item.add_date}}</text></view>

index.js:

goToDetail: function (e) {// 获取携带的data-id的数据  // console.log(e)let id = e.currentTarget.dataset.id// 携带新闻ID进行页面跳转wx.navigateTo({url: '../detail/detail?id='+id,})},

4.本地缓存

wx.setStorageSync()：同步请求，如同浏览器cookie本地缓存方法。
取出本地缓存方法wx.getStorageSync()
异步请求的方法是wx.setStorage()，
参考官方文档：【https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html】

eg：实现收藏功能
detail.wxml:

<button wx:if="{{isAdd}}" plain bindtap="cancelFavorites" style="color:red">❤已收藏</button>
<button wx:else plain bindtap="addFavorites">❤未收藏</button>

detail.js:

  // 添加收藏addFavorites: function (e) {let article = this.data.articlewx.setStorageSync(article.id, article)this.setData({isAdd: true})},// 取消收藏cancelFavorites: function (e) {let article = this.data.articlewx.removeStorageSync(article.id)this.setData({isAdd: false})},

5.接收跳转参数

eg：detail页接收id并显示

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// console.log(options.id)let id = options.id// 检查当前新闻是否在收藏夹中var newarticle = wx.getStorageSync(id)// 已存在if (newarticle != "") {this.setData({isAdd: true,article: newarticle})}// 不存在else {let result = common.getNewsDetail(id)// 获取新闻内容if (result.code == "200") {this.setData({article: result.news,isAdd:false})}}},

6.获取缓存列表

// 更新number
getMyFavorites: function () {let info = wx.getStorageInfoSync() //读取本地缓存信息    let keys = info.keys //获取全部key信息    let num = keys.length //获取收藏新闻数量let myList = [];    for (var i = 0; i < num; i++) {let obj = wx.getStorageSync(keys[i])      myList.push(obj)    }    // 更新收藏列表    this.setData({      newsList: myList,      number: num    })  },

微信小程序案例学习笔记相关推荐

wechat_微信小程序的学习笔记
微信小程序的学习目标一.初识小程序 1.小程序简介二.安装并创建小程序项目 1.注册小程序开发账号(目的:获取AppID) 2.安装小程序开发者工具 3.创建和配置小程序项目三.学习小程序项目 ...
微信小程序Day2学习笔记
学习目标此笔记参考b站黑马程序员微信小程序开发视频 D盘有文件写入权限问题,,今天换成了C盘,希望要撑住.. 1.WXML 模板语法 1.数据绑定的基本原则在 data 中定义数据在 WXM ...
微信小程序Day4学习笔记
学习目标基础强化目录 1. 自定义组件 - 创建新建组件 1. 引用组件 2. 局部引用组件在 json 中引用, 在页面 wxml 中可以用标签 - 添加使用 3. 全局引用组件全局配 ...
微信小程序开发学习笔记一
微信小程序学习笔记(一) 环境使用及创建项目文件目录设置 JS文件环境使用及创建项目环境使用:微信开发者工具一个微信号只能开发一个微信小程序. 在微信小程序开发手册下载最新版本,学习不要bet ...
微信小程序进阶学习笔记Day05
学习目标:微信小程序基础Day05 今日目标: 能够知道如何安装和配置 vant-weapp 组件库能够知道如何使用 MobX 实现全局数据共享能够知道如何对小程序的 API 进行Promise ...
微信小程序基础学习笔记Day02
学习目标:微信小程序基础Day02 今日目标: 能够使用 WXML 模板语法渲染页面结构能够使用 WXSS 样式美化页面结构能够使用 app.json 对小程序进行全局性配置能够使用 page. ...
微信小程序基础学习笔记Day01
学习目标:微信小程序基础Day01 今日目标: 能够知道如何创建小程序项目能够清楚小程序项目的基本组成结构能够知道小程序页面由几部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行 ...
微信小程序开发学习笔记006--微信小程序组件详解02
技术交流QQ群:170933152 案例7:开关选择器案例8:各种图标案例9:页面跳转案例10:多媒体音视频案例11:嵌入地图案例12:画布:在上面可以画柱状图等等. 今天继续讲组件: 登录 ...
微信小程序，学习笔记（三）微信小计算器
新年快乐,开工咯~~!! 2017年,新年上班第一天,大家都忙着串领导办公室领红包,我这人比较懒,就工位旁边领导领了个,闲着无聊,来写这新年第一遍博客,程序其实是去年回家前搞定的,今天算是给补上这篇记 ...

微信小程序案例学习笔记