微信小程序 · PHP/Python/前端/Linux 等等学习笔记

# 微信小程序 --- [TOC] ## 1.下载 [小程序工具][1] ### 4.rpx说明 px为物理像素点,pt为逻辑像素点 iPhone6逻辑像素375x667 ,设计稿宽度为750; 则用设计稿的750rpx即可iPhone6 1px=1rpx=0.5pt, ### 5.布局在设计样式时候,布局推荐采用flex布局 ### 6.技巧 #### 1.在pages中配置window 在配置pages中的页面时,app.json中的 ```json { "window": { "navigationBarBackgroundColor": "#b3d4db" } } ``` 变为welcome.json ``` { "navigationBarBackgroundColor": "#405f80" } ``` #### 2.对swiper等属性操作推荐加上`{{ }}` ``` <swiper vertical='{{true}}' > ``` `{{}}`中的值具有布尔值的效果 #### 6.绑定函数 *事件绑定的写法同组件的属性，以 key、value 的形式。* *key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart或者如bind:tap、、catch:touchstart。* ``` <view class='moto-container' bindtap='onTap' > <text class='moto'>开启微信小程序</text> </view> ``` 跳转实例(相对路径) ``` { onTap:function(){ //可以返回referer页面,并且最多跳五级 wx.navigateTo({ url: '../posts/posts', }) //无法返回referer页面 wx.redirectTo({ url: '../posts/posts', }) }, } ``` #### 7.加载本地数据在根目录 `/data/posts-data.js` ``` var local_database = [ { title: '正是霞飞卸妆时1',postId:0}, { title: '正是霞飞卸妆时2',postId:1}, { title: '正是霞飞卸妆时3',postId:2}, ]; //模块输出 module.exports={ postList:local_database, } ``` 在post.js中载入 ``` //注意此时载入更目录需要../../ 且只能是相对路径 var post_content=require('../../data/posts-data.js'); onLoad: function () { //注意载入为数据,需添加键名 postList this.setData({post_key:post_content.postList}); }, ``` #### 8.使用模版在项目的子目录中创建在`post`目录中 `post/post-item/post-item-template.wxml` `post/post-item/post-item-template.wxss` 在wxml中 ``` <template name='postItem'> <view class='post-container'> <text class='post-title'>{{title}}</text> </view> </view> </template> ``` 在`post.wxml`中 ```js <import src="post-item/post-item-template.wxml" /> //注意加反斜线 <block wx:for="{{postList}}" > //<template is="postItem" data="{{data}}" />//或直接传 //增加传入自定义对象 //<template is="postItem" data="{{age_key:name;data_key:data}}" /> //引入template,item前加三个'.' 即模版中无需使用item <template is="postItem" data="{{...item}}" /> </block> ``` 提取css文件放入`post-item/post-item-template.wxss`中在`post.wxss` ``` @import 'post-item/post-item-template.wxss'; ``` #### 8.绑定id跳转 wxml ``` <block wx:for="{{postList}}" wx:key='key'>  <view bindtap="toPostDetail" data-postId="{{item.postId}}"> <template is="postItem" data="{{...item}}" /> </view> </block> ``` js ``` toPostDetail:function(event){ var postId = event.currentTarget.dataset.postid; wx.navigateTo({ url: 'post-detail/post-detail?id='+postId, }) }, ``` 接受参数 ``` //接收值 onLoad: function (options) { //postId 对应的文章id var postId = options.id; } ``` #### 11.wx:if判断作用: 1.判断是否像是该容器(view) `<view class='container' wx:if="{{containerShow}}"></view>` 2.切换图片等操作的两种方式方式一用`wx:if="{{foo}}"` ```js <image wx:if="{{collcted}}" catchtap='onCollectionTap' src='/images/icon/love1.jpg'></image> <image wx:else catchtap='onCollectionTap' src='/images/icon/love.jpg'></image> //方法一适合多次判定只需 <image wx:elseif="{{collcted==2}}" catchtap='onCollectionTap' src='/images/icon/love1.jpg'></image> ``` 方式二,三元表达式 ``` <image catchtap='onMusicActionTap' src="{{isPlayMusic?'/images/music.png':'/images/zanting.png'}}"></image> ``` #### 12.获取全部变量 ``` //在App.js中,获取全局变量 App({ globleData:{ g_isPlayMusic:false, } //------------------------------------------ //在postDetails.js中 var App = getApp(); //获取全局对象即App() page({ onLoad: function (options) { var globData = App.globleData.;//获取全局对象的属性 App.globleData.g_isPlayMusic=true;//设置全局变量 }) ``` #### 13.this.data 与setData区别 `this.data` 用于Page()内部传递值,但无法把值渲染到页面 `this.setData` 可用于把值渲染到页面 ``` this.setData({name:"cpj"}); //添加name值 ``` #### 14.动态设置导航栏名称 ``` wx.setNavigationBarTitle({ title: cateId, }) ``` #### 14.写公共方法在utils/util.js中(或新建com.js,在引入时候引入com.js即可) ``` function HaoManystarts(starts){ var num = starts.toString().substring(0, 1); var array = []; for (var i = 1; i <= 5; i++) { if (i <= num) { array.push(1); } else { array.push(0); } } return array; } //输出数据 module.exports={ HaoManystartsArray: HaoManystarts } ``` 在pages/movies/movies.js中 ``` var util = require('../../utils/util.js'); Page({ util.HaoManystartsArray('123') }) ``` #### 16.跳转到下级界面时,如果传递值 ``` Page({ data: { navgateTitle:"" //初始化传递的值 }, onLoad: function (options) { var cateId = options.cateId; this.data.navgateTitle=cateId;//绑定参数到data中 }, onReady: function () { wx.setNavigationBarTitle({ title: this.data.navgateTitle, }) }, ``` #### 17.上拉加载更多/下拉刷新 ##### 1.推荐方法 **onPullDownRefresh -下拉刷新**: 在需要下来刷新的页面配置json `{"enablePullDownRefresh":true}` **onReachBottom -上拉触底** 可以在需要下来刷新的页面配置json `{"ReachBottomDistance":"100px"}`。在触发距离内滑动期间，本事件只会被触发一次。 **onPageScroll: 页面滚动** ``` //上拉加载更多 onReachBottom:function(){ 原有数据在加上要获取的数据 page=1 pagesize=10, 第一页 count=10 刷新后 page=2 }, ``` ##### 2.上拉刷新方法,无法与上拉兼容(不推荐) **思路**:下拉刷新不能在原来数据后添加数据,只能全部重新加载原有数据+page数量的数据 **wxm文件** 须设高度一般为`1300rpx`,以触发滚到底部事件 ```js <scroll-view class='grid-container' scroll-y bindscrolltolower="lower"> //code </scroll-view> ``` **js文件** ``` lower: function (event) { //totalCount 例:第一次为0 第二次为20 第三次为40 var nexUrl = this.data.request+"?start="+this.data.totalCount+"&count=20"; util.http(nexUrl, this.processDoubanData); }, ``` #### 18.login动画 ``` wx.showNavigationBarLoading();//在导航栏显示login动画 wx.hideNavigationBarLoading(); ``` #### 推荐答应日志方法 `wx.setStorageSync('获取到的cate值', cate);` ### 4.习惯 #### 1.自定义函数加 ``` onCollectionTap:function(event){ //code }, ``` #### 2.掉用的自定义函数内部无法使用page中的this 解决方法在调用自定义函数前,把this 赋值 ``` var that = this foo(){ that.setData } ``` #### 2.地址栏参数地址栏中的参数推荐为小写 ### 5.实例 #### 1.异步获取值并用template输出 ``` getMovieLists:function(url,cate){ var that = this; wx.request({ url: this.data.base + url, method: 'GET', header: { "content-type": "appliction/json"//需要传递头部信息 }, success: function (res) { that.processDoubanData(res.data, cate); }, fail: function (res) { console.log(res) }, }); }, //处理接收值 processDoubanData: function (moviesDouban, cate){ var movies = []; for (var idx in moviesDouban.subjects){ var subject = moviesDouban.subjects[idx]; var title = subject.title;//获取标题 if(title.length>=6){ title = title.substring(0,6)+'...'; } //存入数据 var temp = { title:title, average: subject.rating.average, converageUrl:subject.images.large, moiveId:subject.id, } movies.push(temp); } var readyData = {}; readyData[cate] = { movies: movies}; this.setData(readyData); }, ``` 为使且套模版的第二层使用相同变量数据结构应为 :-: ![数据格式][2] [1]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html [2]: http://wx2.sinaimg.cn/mw690/866d4b6agy1fjrz8d5528j204j048mx3.jpg