devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信原生小程序开发学习-小白逐步学习更新中_怎么用微信原生写app

作者：小小林熬夜学编程 | 2024-05-17 13:41:28

赞

踩

怎么用微信原生写app

官方学习文档：基础 | 微信开放文档

目录

环境部署

做底部导航栏

引入本地图片

index.wxml引入另外一个页面

引入样式

自定义组件

审查元素

实现轮播图：微信小程序实现轮播图，自定义点击图标切换图片

发布体验包

生命周期

父子组件传值

兼容性问题

内联样式

获取点击事件内的参数

自定义头部导航栏

实现气泡

报错：navigateTo:fail can not navigateTo a tabbar page

小程序禁止右滑或返回按钮返回上一页的功能

退出小程序

  • 环境部署

1.申请一个AppID

在网址：微信公众平台，点击截图中红色圈住部分

2.进入页面后，下滑到底端，点击前往注册

3.注册之后，登录小程序后台 ：小程序，我们可以在菜单 “开发”-“开发设置” 看到小程序的AppID了 

4.下载微信开发者工具，用上面同一个微信号登录开发者工具

5.打开开发者工具，点击新建小程序，输入AppID

6.新建后，创建云服务openid

官方文档：微信开放文档

在开发者工具工具栏左侧，点击 “云开发” 按钮

点击开通按钮，然后按照提示进行

注：AppID 首次开通云环境后，需等待大约 10 分钟方可正常使用云 API，在此期间官方后台服务正在做准备服务，如尝试在小程序中调用云 API 则会报 cloud init error：{ errMsg: "invalid scope" } 的错误

7.新建云函数： “云开发”控制台内

8.找到云开发的环境ID

点击云开发控制台窗口里的设置图标，在环境变量的标签页找到环境名称和环境ID。

当云开发服务开通后，我们可以在小程序源代码cloudfunctions文件夹名看到你的环境名称。如果在cloudfunctions文件夹名显示的不是环境名称，而是“未指定环境”，可以鼠标右键该文件夹，选择“更多设置”，然后再点击“设置”小图标，选择环境并确定。

9.指定小程序的云开发环境

打开开发者工具中打开源代码文件夹miniprogram里的app.js，在 env: 'my-env-id'处改成你的环境ID

10.微信小程序云开发获取openid报错

按照提示右键目录，问题成功解决

  • 做底部导航栏

1.pages文件夹下新建文件夹home

2.新建文件夹home下面新建页面index，输入index后回车，自动生成文件

3.修改app.json文件

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

新增任何页面都需要在app.json文件的"pages":[]内添加路径

然后需要写导航栏

  1.   "tabBar": {
  2.     "list": [{
  3.       "pagePath": "pages/home/index",
  4.       "text": "首页"
  5.     }, {
  6.       "pagePath": "pages/index/index",
  7.       "text": "设置"
  8.     }]
  9.   },

4.简单的导航栏就完成啦

  • 页面的简单开发

官网学习链接：小程序代码构成 | 微信开放文档

在小程序中WXML 充当的就是类似 HTML 的角色

和 HTML 非常相似，WXML 由标签、属性等等构成。

1.标签名字

HTML的标签是:div, p, span等

小程序的 WXML 用的标签是 :view, button, text 

2.wx:if 这样的属性以及 {{ }} 这样的表达式

网页中我们通常会通过 JS 操作 DOM

小程序的框架也是用到了这个思路，如果你需要把一个 Hello World 的字符串显示在界面上。

WXML 是这么写 :

  1. <view>{{ msg }}</view>
  2. <button bindtap="clickMe">点击我</button>

在 JS 文件里边声明 clickMe 方法来响应这次点击操作：

  1. Page({
  2.   clickMe: function() {
  3.     this.setData({ msg: "Hello World" })
  4.   }
  5. })

通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

3.WXSS 样式:WXSS | 微信开放文档

相当于我们的css文件

新增了尺寸单位 rpx 

WXSS 仅支持部分 CSS 选择器

  • 引入本地图片

1.微信开发工具 打开项目

2.新建个文件夹（放项目的一级或者二级目录都可以），然后把图片拷贝到这个目录下。

3.代码的两种实现方法

一种是：直接在wxml文件下使用图片标签，并且直接写出路径

<image src="路径"></image>

另一种是：

在wxml文件下使用图片标签

<image src="{{src}}"></image>

然后在js文件中设置路径

等等，等有时间的时候继续学习并且同步更新博客

  • index.wxml引入另外一个页面

先通过import引入另外一个wxml页面，然后用template组件

（1）index.wxml中template 标签的is属性与template.wxml中template 标签的name属性值相同

（2）index.wxml文件中要通过import标签声明需要使用的模板文件

index.wxml

  1. <!--index.wxml-->
  2. <import src ="./swiper.wxml"/>
  3. <view class="container">
  4.   <view class="box">
  5.   　  <view>学习引入另外一个页面</view>
  6.       <template is="swiper"/>
  7.       <view>通过template引入swiper.wxml</view>
  8.       <text>Hello World</text>
  9.       <image src="../images/tree.jpg"></image>
  10.   </view>
  11. </view>

swiper.wxml

  1. <template name="swiper">
  2. 123哒哒哒哒哒
  3. </template>

  • 引入样式

在index.wxss文件内，引入样式文件，那么这个样式文件就会生效

@import "./swiper.wxss";

  • 自定义组件

1.新建json wxml wxss js这四个文件

2.在swiper.json中进行自定义组件声明,也就是告诉开发者这是一个组件:

  1. {
  2.   "component": true
  3. }

3.swiper.wxml

  1. <view class="container">
  2.   <view class="testColor">{{text}}{{innerText}}</view>
  3. </view>

4.swiper.wxss

.testColor{color:red}

5.注册组件

在自定义组件的js文件中,需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法,如在cpt.js中:

  1. Component({
  2.   properties: {
  3.     // 这里定义了innerText属性，属性值可以在组件使用时指定
  4.     innerText: {
  5.       type: String,
  6.       value: 'default value',
  7.     }
  8.   },
  9.   data: {
  10.     // 这里是一些组件内部数据
  11.     text:"text"
  12.   },
  13.   methods: {
  14.     // 这里是一个自定义方法，将自定义组件的函数都写在这里面
  15.     customMethod: function () {
  16.       console.log('customMethod')
  17.     }
  18.   }
  19. })

6.使用自定义组件
在你要用组件的那个页面中引用声明.也就是在index.json文件中：

  1. {
  2.   "navigationBarTitleText": "学习轮播图",
  3.   "usingComponents": {
  4.     "componentName": "./swiper/swiper"
  5.   }
  6. }

在index.wxml中使用:（注意里面引用的组件名是上面usingComponents内的名字）

  1. <view class="box">
  2.   <view>学习引入另外一个页面</view>
  3.   <componentName inner-text="自定义组件" />
  4.   <image src="../images/tree.jpg"></image>
  5. </view>

  • 审查元素

  • 实现轮播图：微信小程序实现轮播图，自定义点击图标切换图片

swiper.wxml

  1. <view class="container">
  2.   <view class="testColor">{{text}}{{innerText}}</view>
  3.   <view class="page-body">
  4.     <view class="swiperContainer">
  5.       <swiper indicator-dots="{{indicatorDots}}"
  6.         autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{currentIndex}}">
  7.         <block wx:for="{{imgUrls}}" wx:key="*this">
  8.           <swiper-item>
  9.             <image src="{{item}}" class="slide-image"/>
  10.           </swiper-item>
  11.         </block>
  12.       </swiper>
  13.       <image src="{{preImage}}" class="pre-image" bindtap="preClick"/>
  14.       <image src="{{nextImage}}" class="next-image" bindtap="nextClick"/>
  15.     </view>
  16.     <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
  17.       <view class="weui-cells weui-cells_after-title">
  18.         <view class="weui-cell weui-cell_switch">
  19.           <view class="weui-cell__bd">指示点</view>
  20.           <view class="weui-cell__ft">
  21.             <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
  22.           </view>
  23.         </view>
  24.         <view class="weui-cell weui-cell_switch">
  25.           <view class="weui-cell__bd">自动播放</view>
  26.           <view class="weui-cell__ft">
  27.             <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
  28.           </view>
  29.         </view>
  30.       </view>
  31.     </view>
  32.     <view class="page-section page-section-spacing">
  33.       <view class="page-section-title">
  34.         <text>幻灯片切换时长(ms)</text>
  35.         <text class="info">{{duration}}</text>
  36.       </view>
  37.       <slider bindchange="durationChange" value="{{duration}}" min="500" max="2000"/>
  38.       <view class="page-section-title">
  39.         <text>自动播放间隔时长(ms)</text>
  40.         <text class="info">{{interval}}</text>
  41.       </view>
  42.       <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
  43.     </view>
  44.   </view>
  45. </view>

swiper.js

  1. Component({
  2.   properties: {
  3.     // 这里定义了innerText属性，属性值可以在组件使用时指定
  4.     innerText: {
  5.       type: String,
  6.       value: 'default value',
  7.     }
  8.   },
  9.   data: {
  10.     // 这里是一些组件内部数据
  11.     someData: 1,
  12.     text: "text",
  13.     background: ['red', 'green', 'yellow'],
  14.     imgUrls: ["../../images/people.jpg", "../../images/tree.jpg"],
  15.     preImage: "../../images/left.png",
  16.     nextImage: "../../images/right.png",
  17.     currentIndex: 0,//当前所在页面的 index
  18.     indicatorDots: true, //是否显示面板指示点
  19.     autoplay: false, //是否自动切换
  20.     interval: 3000, //自动切换时间间隔,3s
  21.     duration: 1000, //滑动动画时长1s
  22.     circular: true, //是否采用衔接滑动
  23.     vertical: false
  24.   },
  25.   methods: {
  26.     // 是否要指示点
  27.     changeIndicatorDots() {
  28.       this.setData({
  29.         indicatorDots: !this.data.indicatorDots
  30.       })
  31.     },
  32.     // 是否自动轮播
  33.     changeAutoplay() {
  34.       this.setData({
  35.         autoplay: !this.data.autoplay
  36.       })
  37.     },
  38.     // 更改轮播切换时间
  39.     intervalChange(e) {
  40.       this.setData({
  41.         interval: e.detail.value
  42.       })
  43.     },
  44.    // 更改自动播放间隔时长
  45.     durationChange(e) {
  46.       this.setData({
  47.         duration: e.detail.value
  48.       })
  49.     },
  50.     //点击切换到上一张图片
  51.     preClick: function (e) {
  52.       if (this.data.currentIndex > 0) {
  53.         this.setData({
  54.           currentIndex: this.data.currentIndex - 1
  55.         })
  56.       } else {
  57.         this.setData({
  58.           currentIndex: this.data.currentIndex + 1
  59.         })
  60.       }
  61.     },
  62.     //点击切换到下一张图片
  63.     nextClick: function (e) {
  64.       if (this.data.currentIndex >= 1) {
  65.         this.setData({
  66.           currentIndex: 0
  67.         })
  68.       } else {
  69.         this.setData({
  70.           currentIndex: this.data.currentIndex + 1
  71.         })
  72.       }
  73.     }
  74.   }
  75. })

  • 发布体验包

1、在微信开发者工具中找到上传按钮，上传当前代码

 2、到微信公众平台登录-版本管理：微信公众平台

  • 生命周期

1、Component组件生命周期

  1. const app = getApp()
  2.  
  3. Component({
  4.   behaviors: [require('miniprogram-computed')],
  5.   /**
  6.    * 使用全局样式属性
  7.    */
  8.   options: {
  9.     addGlobalClass: true
  10.   },
  11.   /**
  12.    * 组件的属性列表
  13.    */
  14.   properties: {
  15.   },
  16.   /**
  17.    * miniprogram-computed提供计算属性
  18.    */
  19.   computed: {
  20.   },
  21.   /**
  22.    * 自带的监听器
  23.    */
  24.   observers: {
  25.   },
  26.   /**
  27.    * miniprogram-computed提供监听器
  28.    */
  29.   watch: {
  30.   },
  31.   /**
  32.    * 组件的初始数据
  33.    */
  34.   data: {
  35.   },
  36.   /*组件生命周期*/
  37.   lifetimes: {
  38.     created: function () {
  39.       console.log("在组件实例刚刚被创建时执行")
  40.     },
  41.     attached: function () {
  42.       console.log("在组件实例进入页面节点树时执行")
  43.     },
  44.     ready: function () {
  45.       console.log("在组件在视图层布局完成后执行")
  46.     },
  47.     moved: function () {
  48.       console.log("在组件实例被移动到节点树另一个位置时执行")
  49.     },
  50.     detached: function () {
  51.       console.log("在组件实例被从页面节点树移除时执行")
  52.     },
  53.     error: function () {
  54.       console.log("每当组件方法抛出错误时执行")
  55.     }
  56.   },
  57.   /*组件所在页面的生命周期 */
  58.   pageLifetimes: {
  59.     show: function () {
  60.       // 页面被展示
  61.       console.log("页面被展示")
  62.     },
  63.     hide: function () {
  64.       // 页面被隐藏
  65.       console.log("页面被隐藏")
  66.     },
  67.     resize: function (size) {
  68.       // 页面尺寸变化
  69.       console.log("页面尺寸变化")
  70.     }
  71.   },
  72.   /**
  73.    * 组件的方法列表
  74.    */
  75.   methods: {
  76.   }
  77. })

2、页面生命周期

  1.  
  2. // pages/a.js
  3. Page({
  4.  
  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.  
  10.   },
  11.  /*页面生命周期*/
  12.  onReady: function () {
  13.     console.log('监听页面初次渲染完成')
  14.  
  15.   },
  16.   onShow: function () {
  17.     console.log('监听页面显示')
  18.   },
  19.   onHide: function () {
  20.     console.log('监听页面隐藏')
  21.  
  22.   },
  23.   onUnload: function () {
  24.     console.log('监听页面卸载')
  25.   },
  26.  
  27.   /**
  28.    * 页面相关事件处理函数--监听用户下拉动作
  29.    */
  30.   onPullDownRefresh: function () {
  31.  
  32.   },
  33.  
  34.   /**
  35.    * 页面上拉触底事件的处理函数
  36.    */
  37.   onReachBottom: function () {
  38.  
  39.   },
  40.  
  41.   /**
  42.    * 用户点击右上角分享
  43.    */
  44.   onShareAppMessage: function () {
  45.  
  46.   }
  47. })
  48.

  • 父子组件传值

1、父传子

子组件：假设名字为child

  1. properties:{
  2.     passValue:{
  3. 		type:String, //数据类型
  4. 		value: '', //默认值
  5. 	}
  6. }
  7. //组件js文件内有一个事件
  8. methods:{
  9.     handleTest(){
  10.         let value = '打印'
  11.         this.triggerEvent('pass',value )
  12.     }
  13. }

父页面

  1. //wxml文件1、首先必须定义id
  2. <child bind:pass="open" passValue="123"/>
  3. //js文件
  4. open(val){
  5.     console.log(val)
  6. },

2、子传父

 子组件：假设名字为child

  1. //组件js文件内有一个事件
  2. methods:{
  3.     handleTest(){
  4.         console.log('打印')
  5.     }
  6. }

父页面

  1. //wxml文件1、首先必须定义id
  2. <child id = 'child'/>
  3. <view bindtap="open"></view>
  4. //js文件
  5. onReady:function(){
  6.     this.child = this.selectComponent('#child')
  7. },
  8. open(){
  9.     this.child.handleTest()
  10. },

  • 兼容性问题

1、IOS微信小程序页面滚动导致滚动穿透的解决办法

第一步：修改对应页面的.json文件
设置页面的 disableScroll: true 属性，该属性需要配合 enablePullDownRefresh: false 使用， disableScroll: true 该属性是禁止页面的滚动，可以解决ios页面滚动的问题

 第二步：修改对应页面的.wxml文件
需要设置页面最外层的样式：height: 100vh;overflow-y: scroll; 设置该样式是为了当此页面内容超出100vh时可以实现内容滚动

 从而就可以实现页面禁止滚动，而超出页面的内容可以滚动。

  • 内联样式

<view style="background-color:{{testData == 1 ?'#f5f5f5':''}};margin-bottom:{{newMarginBottom}}rpx"></view>

  • 获取点击事件内的参数

  1. .wxml文件
  2. <view bindtap="change" data-id="{{1}}"></view>
  3. .js文件
  4. change(e){
  5.     const id = e.currentTarget.dataset.id
  6. }

  • 自定义头部导航栏

  1. wx.setNavigationBarTitle({
  2.     title:'新的导航栏文案'
  3. })

  • 实现气泡

.wxml页面(引用了vant的遮罩)

  1. <view bindtap="handleShow" class="box">
  2.     <view wx:if="{{show}}" class="newPopBox">
  3.         <view>测试</view>
  4.     </view>
  5. </view>
  6.  
  7. ...
  8. <van-overlay show = '{{show}}' bind:click="closeShow">

.js页面

  1. ...
  2. data:{
  3.     show:false,
  4. }
  5. ...
  6. methods:{
  7.     handleShow(){
  8.         this.setData({
  9.             show:true,
  10.         })
  11.     },
  12.  
  13.     closeShow(){
  14.         this.setData({
  15.             show:false,
  16.         })
  17.     },
  18. }

.less页面

  1. .box{
  2.     position:relative;
  3.     .newPopBox{
  4.         z-index:999;
  5.         width:256rpx;
  6.         height:180rpx;
  7.         border-radius:16rpx;
  8.         position:absolute;
  9.         top:60rpx;
  10.         left:-52rpx;
  11.         background:#fff;
  12.     }
  13.     .newPopBox:after{
  14.         border:12rpx solid transparent;
  15.         border-bottom:12rpx solid #fff;
  16.         content:'';
  17.         position:absolute;
  18.         top:-24rpx;
  19.         right:32rpx;
  20.     }
  21. }

  • 报错：navigateTo:fail can not navigateTo a tabbar page

解决方法
判断你要跳转的页面是否是tarBar内的页面，然后选用下面对应的方法

方法一：使用switchTab，switchTab用于跳转tarbar内的页面：

  1.   wx.switchTab({
  2.             url: '../job/job',
  3.           })

方法二：使用redirectTo，navigateTo跳转不是tarBar内的页面：（在模拟器上不报错，在真机上报错）

  1.   wx.redirectTo({
  2.             url: '../logs/logs',
  3.           })

  • 小程序禁止右滑或返回按钮返回上一页的功能

wx.redirectTo

通过wx.redirectTo跳转的页面，前一个页面不会缓存在路由history，所以右滑动只是会退出小程序

  • 退出小程序

wx.exitMiniProgram({})

该事件需要执行点击事件才会生效

  • 小程序下拉刷新ios回弹问题-onPullDownRefresh

 因为一些兼容问题，在ios上通过 wx.onPullDownRefresh 下拉后的部分尔尔会出现无法恢复下拉前的状态。这里只要等我们的下拉请求完后通过wx.stopPullDownRefresh() 让页面恢复原状就好了。

  1.   onPullDownRefresh: function () {
  2.     this.setData({
  3.       pageNum: 1,
  4.       theEnd:false
  5.     }, () => {
  6.       this.getList().then(res=>wx.stopPullDownRefresh())
  7.     })
  8.   },

  • 微信小程序input安卓手机获取焦点时候上移

 把input组件换成textarea组件,因为textarea组件有个fixed属性

如果对于textarea高度没啥要求，直接用下面的代码

<textarea placeholder-class="placeholder-class" auto-height fixed class="input" placeholder="请填写"></textarea>

 如果需要限制textarea高度，用下面的代码

  1. <textarea placeholder-class="placeholder-class" auto-height fixed class="input" placeholder="" value="{{searchName}}"></textarea>
  2. <text class="search-placeholder" wx:if="{{!searchName}}">请填写</text>
  3.  
  4.  
  5.  
  6. .search-placeholder{
  7.     position:absolute;top:32rpx;left:102rpx;color:#999;z-index:0;font-size:28rpx;
  8. }
  9. .input{
  10.     position:relative;height:72rpx;line-height:72rpx;
  11. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/583830
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号