微信小程序实战教程超级详细

1.首先创建小程序项目
删掉
三个文件夹里面的东西，后面重新创建
2.打开微信开发者工具打开项目找到app.josn

3.我需要三个页面，所以创建首页，地图，和用户
4.配置 vant weapp ：
vant weapp地址：https://youzan.github.io/vant-weapp/#/search
①.点开miniprogram文件夹在终端中打开，在终端中输入“npm init”后，直接enter到最后，

②. init操作完成后输入“npm i @vant/weapp -S --production”，配置vant weapp

③. 点开微信开发程序中的“工具” —>构建npm（构建完成后会有一个miniprogram_npm文件夹）

这样我们就配置完成

5.我需要一个导航栏

接下来使用组件进入vant weapp地址：https://youzan.github.io/vant-weapp/#/search
找到自己需要用的组件我这里需要搜索框

同理将自己需要的放入即可

开始调用接口，我们需要搜索城市的接口
用聚合数据请求接口


```javascript//请求所有城市列表
//相当于把我们的请求封装起来，就不用请求很多次数据了，只用请求这一次即可，这个函数的名字是自己取的，在函数封装的时候，下面有一个success（res），会将指针this指向res，所以我们要在改变指针指向方向改变之前就要去给他固定住指针的方向ctiyList:function(){var that = this;//当需要传递参数时 固定指针wx.request({//url是接口上的请求地址+请求参数url: 'url',   method:"GET",header:{"content-type":"application/x-www.form-urlencoded"},success(res){//res是接收接口的所有的数据console.log(res);//在微信小程序中只能用setDate来改变变量的值 不能用“变量名=变量值”来改变that.setData({citys:res.data.result//citys是自己在data中定义的一个数组用来保存我们接收到的数据})// console.log(that.data.citys)}})},

写在data之后

2. 然后我们来判断我们在搜索框中写的内容和我们请求到的数据是否匹配是否相同```javascriptonClick() {console.log('搜索' + this.data.value);//判断我们得到的数据与输入的数据是否匹配for(let i=0;i<this.data.citys.length;i++){if(this.data.citys[i].city_name==this.data.value){//如果我们输入的城市存在 那就返回我们输入城市的id值，并且保存在变量中this.setData({cityID:this.data.citys[i].id})}}console.log("城市id:"+this.data.cityID)},

这样就请求到数据

请求今日电影：和上图一样将保存的数据传到today
todayMovie:function(cid){

    var that=this;wx.request({url: `url`,method:"GET",header: {"content-type": "application/x-www-form-urlencoded"},success(res){console.log(res)that.setData({today:res.data.result})}})},

<view wx:for="{{today}}" wx:key="index" class="movie_list"><image src="{{item.pic_url}}" alt=""></image><view><text>{{item.movieName}}</text></view>
</view>

wxml文件里wx：for 遍历
最后结果

待更新。。。。

微信小程序实战教程超级详细相关推荐

基于云开发的微信小程序实战教程（一）
基于云开发的微信小程序实战教程(一) 最近刚开发了款小程序,在开发过程中发现,基于云开发的教程资源不是很多,而且很不详细.所以边实战边总结了下云开发的简单教程,希望对你有所帮助. 本章主要内容:什么是 ...
微信小程序实战教程-闫涛-专题视频课程
微信小程序实战教程-38472人已学习课程介绍介绍微信小程序API,包括页面布局.网络交互.媒体文件.本地缓存.地理位置.WebSocket和传感器技术,后以翼健康为模板,开发一套 ...
基于云开发的微信小程序实战教程（二）
基于云开发的微信小程序实战教程(二) 上篇文章中,简单介绍了下小程序云开发的概念,还有开发工具的安装和配置,云开发环境已经搭建完毕. 本章主要内容:微信开发者工具如何使用,小程序云开发的基础目录结构 ...
微信小程序实战教程：模仿—网易云音乐（二）
接上一篇:微信小程序实战教程:模仿-网易云音乐(一) wxml进行渲染:  <view class="lyric-content" hidden ...
微信小程序实战教程1503---生成二维码
在微信小程序中,如果我们可以自己将指定内容生成二维码,出示给别人,将是一个比较有用的功能.但是微信小程序API中,目前暂时还没有这个功能,但是我们可以通过变通的方法,来实现这一功能. 本文所提到的方法 ...
微信小程序开发语言（微信小程序开发教程）详细步骤
微信小程序开发语言开发微信小程序用什么语言 1.微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言).WX ...
python微信小程序实例制作入门_python flask零基础打造微信小程序实战教程
资源目录: ├─python3+flask │ ├─第1章介绍 │ └─1-1 导学--Python Flask 构建微信小程序.mp4 │ ├─第2章微信小程序介绍 │ ├─2-1 小程序是什么 ...
微信小程序实战教程：模仿—网易云音乐(一）
初窥 todo: 添加音乐到收藏(最近)列表歌词滚动从一个hello world开始微信开发者工具生成目录如下: . |-- app.js |-- app.json |-- app.wxss ...
视频教程-微信小程序开发教程(第1篇)-微信开发
微信小程序开发教程(第1篇) 微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试(软考)--"信息系统项 ...

微信小程序实战教程超级详细

微信小程序实战教程超级详细相关推荐

最新文章

热门文章

微信小程序实战教程 超级详细

微信小程序实战教程 超级详细相关推荐

最新文章

热门文章

微信小程序实战教程超级详细

微信小程序实战教程超级详细相关推荐