微信小程序入门

最新推荐文章于 2024-04-17 22:08:46 发布

H4ppyD0g

最新推荐文章于 2024-04-17 22:08:46 发布

阅读量162

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_42172261/article/details/120996276

版权

wx小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ps:学习内容来自新视觉实训，仅作为个人学习使用。

文章目录

环境准备
基本组件示例
小程序配置示例
wxml语法示例
框架接口示例
- 页面-Page
- 事件
API示例
小程序上线
附获取用户头像昵称
登录功能链接

环境准备

只需要用到开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

api文档
https://developers.weixin.qq.com/miniprogram/dev/api/

请添加图片描述

小程序特点
1、没有DOM
2、组件化开发
3、单个压缩包体积不能大于2M
4、四个重要文件
*.js–>js文件
*.wxml–>html文件
*.wxss–>css文件
*.json–>json文件

可以编辑pages/index/下的文件后点击编译和预览查看效果

基本组件示例

两个view块标签放在一行
.c1 view{color:skyblue; display:inline}
<view class="c1">
	<view>hello</view>
	<view>world</view>
</view>

text行标签也适用
.c1 view{color:skyblue; display:inline}
<view class="c1">
	<text selectable space="enps">hello</text>
	<text space="enps"> world</text>
</view>

图片

<image src="/images/a.png" mode="widthFix" show-menu-by-longpress></image>

超链接

<view>
	<navigator url="/pages/logs/logs">跳转到日志</navigator>
</view>
<view>
	<navigator url="/pages/logs/logs" open-type="reLaunch">跳转到日志</navigator>
</view>

滚动效果

.scrOut{
    height: 50px;
}
.scrBox{
    background: skyblue;
}

<scroll-view scroll-y>
	<view class="scrOut">
		<view class="scrBox">1</view>	<view class="scrBox">2</view>
		<view class="scrBox">3</view>	<view class="scrBox">4</view>
		<view class="scrBox">5</view>
	</view>
</scroll-view>

图片滚动

.s{ border: 1rpx solid skyblue;}
.s image{width: 100%;}

<swiper class="s" indicator-dots="true">
	<swiper-item>
		<image src="/images/a.png" mode="widthFix"></image>
	</swiper-item>
	<swiper-item>
		<image src="/images/b.png" mode="widthFix"></image>
	</swiper-item>
	<swiper-item>
		<image src="/images/c.png" mode="widthFix"></image>
	</swiper-item>
</swiper>

按钮

<view>
	<button type="primary">login</button>
	<button type="warn">logout</button>
	<button type="default" loading="true">pending</button>
</view>

输入框

.c1{border:1rpx solid #aaa;height: 70rpx;padding:0 10rpx; box-sizing: border-box;}
.c2{}

<form>
	<input class="c1" placeholder="user name" placeholder-class="c2"
	cursor-spacing="100"></input>
</form>

小程序配置示例

注意区分全局配置和页面配置
全局配置在app.json文件中，
页面配置在pages目录下的每个json文件中。

"window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#aaa",
    "navigationBarTitleText": "This is title",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#ccc",
    "enablePullDownRefresh": true
  }

"tabBar": {
    "backgroundColor": "#ccc",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/d.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/e.png"
      }
    ]
  }

wxml语法示例

数据绑定

WXML 中的动态数据均来自对应 Page 的 data，示例如下。

.js文件
Page({
  data: {
    message: 'Hello MINA!'
  }
})
.wxml文件
<view> {{ message }} </view>

条件渲染

<view wx:if="{{day==1}}">周1</view>
<view wx:elif="{{day==2}}">周2</view>
<view wx:else="{{day==3}}">周3</view>

列表渲染

.js文件
data: {
        array: [
            {message: 'a',}, 
            {message: 'b'}
        ]
      },

.wxml文件
<view wx:for="{{array}}" wx:key="*this">
  {{index}}: {{item.message}}
</view>

框架接口示例

页面-Page

// pages/demo/demo.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        
      },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

事件

// pages/demo/demo.js
Page({
    data:{
        content:"Click here!"
    },
    handleTap:function(res){
        var c = res.currentTarget.dataset.content
        console.log(c)
        this.setData({
            content:c
        })
    }
})

<view bindtap="handleTap" data-content="haha">
    {{content}}
</view>

API示例

带参数跳转到tab页面

clickBtn:function(){
    wx.reLaunch({
      url: '/pages/logs/logs?id=5',
      success:res=>{
        console.log(res)
      }
    })
  }

<button type="primary" bindtap="clickBtn">jump to log</button>

wx.request网络请求api

.out{padding: 30rpx; box-sizing: border-box;}
.row{display: flex; height: 150rpx; margin-bottom: 20rpx;}

.pic{flex: 2;}
.pic image{width: 100%; height:100%;}

.text{flex: 8; border-bottom: 1rpx solid #eee; padding-left: 10rpx; display: flex; flex-direction: column;justify-content: space-between;}
.text .title{font-size: 38rpx;} 
.text .time{color: #999;}

<view class="out">
    <view class="row" wx:for="{{resData}}" wx:key="index">
        <view class="pic">
            <image src="{{item.picurl}}"></image>
        </view>
        <view class="text">
            <view class="title">{{item.title}}</view>
            <view class="time">{{item.posttime}}</view>
        </view>
    </view>
</view>

/**
     * 页面的初始数据
     */
    data: {
        resData:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        wx.request({
          url: 'http://edu.newsight.cn/wxList.php',
          data:{
              num:5
          },
          success:res=>{
              console.log(res.data)
              this.setData({
                  resData:res.data
              })
          }
        })
    },

小程序上线

第1步，修改AppId
微信公众平台登录小程序
点击开发-》开发设置-》复制AppId；
去微信开发工具-》详情-》基本信息
-》修改AppId

第2步，修改合法域名
微信开发工具-》详情-》本地设置
-》取消不校验合法域名
小程序官网-》开发-》开发设置
-》将网址编辑进到服务器域名

第3步，上传
微信开发工具-》上传
小程序官网-》管理-》版本管理-》提交审核
审核版本-》上线

附获取用户头像昵称

为简化代码和思路，删除不必要文件。
请添加图片描述

// index.js
// 获取应用实例
const app = getApp()  //这里没有用到

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  }
})

<!--index.wxml-->
<view class="container">
  <view class="userinfo">

    <block wx:if="{{hasUserInfo}}"> <!--有当前用户信息-->
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <!--头像-->
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>    <!--昵称-->
    </block>

    <block wx:else>  <!--当前没有用户信息-->
      <!--尝试获取用户信息授权-->
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>  
      <view wx:else> 无法获取头像昵称 </view>
    </block>

  </view>
</view>

/**index.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 


.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}