小程序交流群:528215729,加入和小伙伴们一起探讨开发疑难、运营idea吧

admin

admin

发表于 2018-05-19 17:41:49

摘要:漫长的小程序之路~ (微信小程序开发 - 微信 小程序外包开发-微信小程序 开发教程-微信小程序开发者社区,尽在 www.mntuku.cn)

***************   小程序项目---整理   ***************

 

1.tabbar 

  icon--81*81

  最少2个、最多5tab

 

2.app.json 是对当前小程序的全局配置

  包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

 

3.工具配置 project.config.json  

  个性化配置例如界面颜色、编译配置等等

 

4. 修改数据

  this.setData({})

 

5.app.json 的 pages 字段:

  当前小程序的所有注册页面路径,不注册则不能使用

  如果页面路径放在最上面,则打开是首页

 

6.本地存储能力

        wx.setStorageSync(logs, logs);

        wx.getStorageSync(logs) ;

 

7.显示隐藏

  wx:if="{{}}"

   hidden="{{}}"

注意:

  需要频繁切换的情景下,用 hidden 更好;

  如果在运行时条件不大可能改变则 wx:if 较好。

 

8.添加class操作,使用三元表达式

  {{mask?bar:}} 

 

9.换行符
换行

友情提示:必须在标签中!

 

10.富文本

nodes是带标签的数据,最好是array

 

11.生命周期

 

注册程序---APP()

onLaunch: 监听小程序初始化 (全局只触发一次)

onShow:小程序启动,或从后台进入前台显示

onHide:从前台进入后台

 

**onLaunch, onShow 参数 ---options

path:打开路径

query:打开query

 

注册页面---page()

onLoad:页面加载 (一个页面只会调用一次)

onShow:页面显示(每次打开页面都会调用一次)

onHide: 页面隐藏 (当navigateTo或底部tab切换时调用)

onReachBottom:页面上拉触底

onPullDownRefresh: 下拉

onShareAppMessage:点击右上角触发

onPageScroll: 页面滚动 参数e ---scrollTop

 

**onLoad参数

query:打开页面传的参数

 

json文件:

onReachBottomDistance:XX

页面上拉触底事件触发时距页面底部距离,单位为px

 

12.下拉刷新

当前页面json文件开启

enablePullDownRefresh:true

监听用户下拉刷新事件

onPullDownRefresh(){}

当处理完数据刷新后,

 wx.stopPullDownRefresh可以停止当前页面的下拉刷新。 

 

13.列表渲染

1.需要加wx:key="xxx",否则warn

2.设置index和item

wx:for="{{array}}"  wx:key="xxxx"

wx:for-index="idx" wx:for-item="itemName"

 

14.条件渲染

1

2

3

 

15.block

包装元素,不会在页面中做任何渲染,只接受控制属性。

 

16.事件

bindtap || bind:tap

 

17.结构存储

存:data-id=""

取:e.currentTarget.dataset.id

 

18.全局数据---app.gloabal

 

globalData: {

        userInfo: null,

        login_session:null

    }

var app = getApp();

  app.globalData.userInfo=1;

 

19.模块化

 

模块存:

可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

 

需要注意的是:

  • exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。
  • 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

module.exports={

    api

}

 

模块取:

在需要使用这些模块的文件中,使用 require(path) 将公共代码引入。

var common = require(common.js)

 

20.wxss---尺寸单位

 

  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

    1px = 2rpx;

 

样式导入

@import "common.wxss";

 

21.全局样式与局部样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。

page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

 

22.事件冒泡

bind事件绑定不会阻止冒泡事件向上冒泡;

catch事件绑定可以阻止冒泡事件向上冒泡。

  

 

23.动画

var animation = wx.createAnimation({

  transformOrigin: "50% 50%",

  duration: 1000,

  timingFunction: "ease",

  delay: 0

})

animation.opacity(n).scaleY(y).step()

 

        this.setData({

            xxx: animation.export()

        });

 

注意:动画需要初始化,可封装城函数

 

24.wx.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。

可通过 getCurrentPages()获取当前的页面栈,决定需要返回几层。

 

25.获取系统信息

wx.getSystemInfo({

  success: function(res) {

    console.log(res.model)

    console.log(res.pixelRatio)

    console.log(res.windowWidth)

    console.log(res.windowHeight)

    console.log(res.language)

    console.log(res.version)

    console.log(res.platform)

  }

})

 

26.设置导航条

wx.setNavigationBarTitle({

  title: 当前页面

})

 

27.wx.navigateTo()

保留当前页面,跳转到某个页面,使用wx.navigateBack可以返回到原页面。

   // 跳转

    handleGo(e) {

        let url = e.currentTarget.dataset.go;

        wx.navigateTo({

            url: url

        });

    }

 

tip: wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面。

 

28.客服

session-from="weapp" 区分来自哪里

 

 

  type="default-light" 

  size="20"

  session-from="weapp"

>

 

button 组件通过设置 open-type="contact" 亦可进入客服会话

 

29.转发

只有写了分享函数,页面右上方菜单才会出现转发选项,返回一个对象。

options有两个参数

from:来自哪里;

target:如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined;

 

  onShareAppMessage(options){

        // console.log(options);

        if(options.from==menu){

            app.globalData.share.path = XXXX;

            return app.globalData.share

        }

    }

 

share: {

            title: 查询售楼处电话,就用新房007,

            path: /pages/index/index,   //路径

            success: function (res) {

                // 转发成功

            },

            fail: function (res) {

                // 转发失败

            }

     }

 

***********************  问题  ************************

 

1.微信小程序点击清除 input 内容,会穿透按钮点击到 input

 

  解决:把搜索框分成了两部分,左边是 input,右边为清除按钮。这样就避免了点击穿透到 input 了。

 

2.小程序地图打开,使用的腾讯地图,而我们使用的坐标是百度地图的坐标(坐标位置的不同)

 

  解决:使用网上的地图坐标转换js,把百度坐标转成合适的坐标

 

3.小程序页面授权跳转,因为首页使用的是tabbar,所以能跳出去,出去之后跳不回来

 

  解决:使用wx.switchTab跳转

 

4.小程序swiper组件不是我们所需要的

 

  解决:使用网上的we-swiper

 

5.页面scroll-view高度问题,page高度问题

 

  解决:page可以使用100%,scroll-view可以使用vh

 

6.页面图片预览,或者说图片保存并扫码

 

  解决:使用wx.previewImage,之后就能预览图片,并且长按也能保存和扫码,但是扫码只识别小程序码

 

7.后台接口返回标签,渲染HTML格式的内容,可以使用rich-text组件

 

   解决:使用组件rich-text把内容放在nodes里面

   

 

8.点击之后改变样式,hover-class="changColor"

 

  解决:XXXX

 

9.获取某个标签的信息,比如高度

 

  解决:小程序没有window对象,所有原生组件(包括view)、自定义组件等,通过操作它们的实例,可以获取到组件的信息。

 

  let query = wx.createSelectorQuery()

      query.select(#id).boundingClientRect()

     query.exec((res) => {

          console.log(res) //当前组件实例的属性

      });

 

10.iPhoneX的处理

 

  解决:

    1.获取系统信息wx.getSystemInfo判断是否是iPhoneX;

    2.定义全局变量,如果是iPhoneX则为true

    3.页面定义占位标签高度为68rpx,定位到底部,wx:if控制;定义页面data,依据全局数据判断;

    4.让原本固定在底部的导航,控制其bottom值,使用wx.createSelectorQuery获取吸顶标签的高度,把高度给导航的bottom值。

 

 

 

 

 

 

***********************  注意事项  ************************

 

1.为什么脚本内不能使用window等对象

  页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件

 

为什么 zepto/jquery 无法使用

  zepto/jquery 会使用到window对象和document对象,所以无法使用。

 

2.wx.navigateTo无法打开页面

  一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面。请避免多层级的交互方式,或者使用wx.redirectTo

 

3.本地资源无法通过 WXSS 获取

  background-image:可以使用网络图片,或者 base64,或者使用标签

 

4.如何修改窗口的背景色

  使用 page 标签选择器,可以修改顶层节点的样式

 

5.为什么 map 组件总是在最上层

  map、canvas、video、textarea 是由客户端创建的原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。 原生组件暂时还无法放在 scroll-view 上,也无法对原生组件设置 css 动画。

 

489阅读 | 0评论
你的回应