微信小程序常用知识点总结

1.在app.json中修改启动页面

 `"entryPagePath": "pages/index/index"`

2.在app.json中修改页面属性

"window":{"backgroundTextStyle":"light",//导航栏字体样式"navigationBarBackgroundColor": "#fff",//导航栏背景颜色"navigationBarTitleText": "Weixin",//导航栏字体内容"navigationBarTextStyle":"black"//导航栏字体颜色},

3.底部菜单配置

"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/img/shouye.png","selectedIconPath": "/img/shouye2.png"},{"pagePath": "pages/xinping/xinping","text": "分类","iconPath": "/img/xinping.png","selectedIconPath": "/img/xinping2.png"},{"pagePath": "pages/guang/guang","text": "逛","iconPath": "/img/guang.png","selectedIconPath": "/img/guang2.png"},{"pagePath": "pages/gouwuche/gouwuche","text": "购物车","iconPath": "/img/gouwuche2.png","selectedIconPath": "/img/gouwuche.png"},{"pagePath": "pages/wode/wode","text": "我的","iconPath": "/img/wode2.png","selectedIconPath": "/img/wode.png"}]}

4.轮播图：

 <swiper indicator-dots indicator-color="#000"  indicator-active-color="red" interval="1000" autoplay circular  ><swiper-item><image src="../../images/001.png"></image></swiper-item><swiper-item><image src="../../images/001.png"></image></swiper-item><swiper-item><image src="../../images/001.png"></image></swiper-item><swiper-item><image src="../../images/001.png"></image></swiper-item></swiper>

5.九宫格轮播图：

html

<view class="v5"><swiper indicator-dots='true'><swiper-item><view class="v51"><block wx:for="{{lbt1}}"><view><image src="{{item.src}}"></image> <text>\n {{item.ch}}</text></view></block></view></swiper-item><swiper-item><view class="v51"><block wx:for="{{lbt2}}"><view><image src="{{item.src}}"></image> <text>\n {{item.ch}}</text></view></block></view></swiper-item></swiper>
</view>

lbt1:[{src:'../../img/01.png',ch:'西瓜'},{src:'../../img/02.png',ch:'冰棒'},{src:'../../img/03.png',ch:'对虾'},{src:'../../img/03.png',ch:'汉堡'},{src:'../../img/03.png',ch:'面包'},{src:'../../img/06.png',ch:'樱桃'},{src:'../../img/07.png',ch:'饮料'},{src:'../../img/08.png',ch:'口红'},{src:'../../img/09.png',ch:'蜂蜜'},{src:'../../img/10.png',ch:'水杯'},],lbt2:[{src:'../../img/11.png',ch:'666'},{src:'../../img/12.png',ch:'冰棒'},{src:'../../img/13.png',ch:'对虾'},{src:'../../img/14.png',ch:'汉堡'},{src:'../../img/15.png',ch:'面包'},{src:'../../img/16.png',ch:'樱桃'},{src:'../../img/17.png',ch:'饮料'},{src:'../../img/18.png',ch:'口红'},{src:'../../img/19.png',ch:'蜂蜜'},{src:'../../img/20.png',ch:'水杯'},]

css：

.v5{width: 90%;margin: 10px auto;height: 100px;}
.v5 .v51{display: flex;flex-wrap: wrap;
}
.v5 .v51 view{width: 20%;height: 50px;text-align: center;font-size: 12px;
}
.v5 .v51 view image{width: 70%;height: 50%;
}

6.模板的使用：
https://blog.csdn.net/ziyue13/article/details/121449381

7.请求网络数据：

wx.request({url: 'http://10.10.198.12:8088/news/getproducts.php', //仅为示例，并非真实的接口地址data: {x: '',y: ''},header: {'content-type': 'application/json' // 默认值},success (res) {console.log(res.data)var code=res.data.code;if(code=="200"){//把商品数据赋值给一个变量that.setData({productlist:res.data.data});}else{console.log("数据访问错误");}}})},

8.map地图的使用：

HTML：

<view><map class="map" scale="19" latitude="33.636563" longitude="114.684444"markers="{{markers}}"></map>
</view>

js：

data: {markers:[{iconPath: "../../images/my3.png",id: 0,latitude: 33.636563,longitude: 114.684444 ,width: 50,height: 50}]},

9.点击事件：

<button  bindtap="go">到这里来</button>

go:function(e){//获取绑定事件的元素console.log(e.target);
}

10.页面传递数据的方法：

（1）：使用缓存：

var k = this.data.shuju;//设置某个缓存wx.setStorage({key: 'key',data: k})//获取缓存wx.getStorage({key: 'key',success(res) {console.log(res.data)}})

（2）：使用reLaunch跳转页面时获取

<button bindtap="test">66</button>
test:function(){wx.reLaunch({url: '/pages/wode/wode?id=2&name=666',})},

在/pages/wode/wode获取数据：

onLoad:function(e) {console.log(e);}

（3）：全局变量

index js：

App({globalData: {title: 'tomatocc'}})

wode.js

var name = getApp().globalData.title;console.log(name);

微信小程序常用知识点总结相关推荐

微信小程序常用知识点
微信小程序 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dEpb5tol-1600061439777)(C:\Users\86183\AppData\Roaming\ ...
微信小程序常用视图容器组件
微信小程序常用视图容器组件 1.组件概述 2.常用的试图容器组件 2.1 view 2.1.1 案例 2.2 scroll-view 2.2.1 案例 2.3 swiper 2.3.1 案例 1.组件 ...
vc++6.0获取磁盘基本信息_微信小程序——常用功能2：微信小程序用户登录，申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
微信小程序-常用api
文章目录微信小程序-常用api 路由 wx.switchTab(Object object) wx.navigateTo(Object object) wx.navigateBack(Object ...
微信小程序开发知识点总结
微信小程序开发知识点总结微信小程序的目录结构 1.外联公共样式的方法根据微信的官方文档,是支持@import的方式一如外联的公共样式的使用@import语句可以导入外联样式表,@import后跟 ...
【小程序】微信小程序常用api的使用，附案例（建议收藏）
1- 前言这是微信小程序常用的几个API,特地总结一下: 学会使用微信官方文档 · 小程序 2- 界面 2.1 wx.setNavigationBarTitle() 标题栏文本 wx.setNav ...
【小程序开发必备】微信小程序常用API全介绍，附示例代码和使用场景
文章目录 1.网络请求相关API 1.1 wx.request 1.2 wx.uploadFile 1.3 wx.downloadFile 1.4 wx.connectSocket 2.页面跳转相关A ...
微信小程序常用表单组件
微信小程序常用表单组件 1.常用表单组件 1.1 button 1.2 checkbox 1.3 input 1.4 label 1.5 form 1.6 radio 1.7 slider 1.8 s ...
微信小程序常用api总结
内容待写... ≧◔◡◔≦ 滑到底啦~ // 1.0 小程序接收传递过来的参数onLoad: function (options) {var str= options.str; //接收到的参数 st ...

微信小程序常用知识点总结

微信小程序常用知识点总结相关推荐

最新文章

热门文章