网站建设资讯

NEWS

网站建设资讯

微信小程序开发入门基础

这篇文章将为大家详细讲解有关微信小程序开发入门基础,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

公司主营业务:成都做网站、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出江城免费做网站回馈大家。

1、自定义标题栏

现在UI要求越来越高,高频出现自定义标题栏的情况

"navigationStyle": "custom"复制代码

2、获取用户信息

用户授权是每个小程序中都会用到的,可以根据自己的项目流程编写自己的逻辑。 用户授权

授权登录复制代码
bindGetUserInfo (e) {    console.log(e.detail.userInfo) // 获取到用户信息}复制代码

已授权的情况下调用「wx.getUserInfo」「wx.getSetting」进行判断该用户是否授权

wx.getSetting({  success (res){    if (res.authSetting['scope.userInfo']) {      // 已经授权,可以直接调用 getUserInfo 获取头像昵称      wx.getUserInfo({        success: function(res) {          console.log(res.userInfo)        }      })    } else {        // 未授权    }  }})复制代码

3、input 设置placeholder样式

复制代码
.placeholderinput {  color: #CCCCCF;  font-size: 36rpx;}复制代码

4、路由

路由跳转用到的比较多,每次跳转的时候总是不能区分用哪一个方式进行跳转,记下来,加深一下印象。
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

wx.switchTab({    url: '../../index/index'})复制代码

跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面,并关闭当前页面

wx.redirectTo({    url: '../../index/index'})复制代码

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

wx.navigateTo({    url: '../../index/index'})复制代码

5、image组件常用mode合法值梳理

为什么详细讲解image,每次后台上传的图片和我们前端界面的尺寸不一样,我们前端就要进行处理了,还有就是测试老是回提出一些图片变形上的问题,为了不让他们提出这些问题,我们详细分析一下,如果有不正确欢迎交流指正。 在固定宽高的情况下:

 复制代码
.pic {  width: 600rpx;  height: 500rpx;  border: 1rpx solid #ccc;}复制代码

设置以下属性图片会发生什么变化

  • scaleToFill  图片的宽高完全拉伸至填满 image 元素,会改变图片的宽高比,图片变形

    微信小程序开发入门基础
  • aspectFit 图片完整的展示出来,图片的宽高比不变。

    微信小程序开发入门基础
  • aspectFill 图片的宽高比不变,为完整的展示,会发生裁切  

    微信小程序开发入门基础

常用的「aspectFit」  「aspectFill」这两个

6、设置input的「confirm-type」 的合法值

设置键盘右下角按钮的文字,type="text"时生效

  • send 右下角按钮为“发送”
  • search 右下角按钮为“搜索”
  • next 右下角按钮为“下一个”
  • go 右下角按钮为“前往”
  • done 右下角按钮为“完成”

为了实现安卓ios的统一confirm-type的设置也是很有必要,默认值是 done,安卓默认是回车,ios默认是完成,所以设置同一只前四个是可以统一的。

关于“微信小程序开发入门基础”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前题目:微信小程序开发入门基础
网站网址:http://njwzjz.com/article/jdhhoo.html