NEWS

网站建设、网站制作、网站设计等相关资讯

微信小程序开发入门篇

日期：2024-04-13 访问：548次作者：admin

喜欢就点击上方关注我们吧！

微信小程序是一种无需下载安装，用完即走的应用，相比于App，其主要优势有降低开发成本，提高用户体验，增加用户黏粘性等。本篇将通过一个微信小程序开发的入门案例带你快速认识并上手小程序SAAS系统开发小程序。

一、开发准备工作

1、注册并下载开发工具

1）需要先注册一个小程序，并下载微信开发者工具。然后就可以扫码登录进去，如下

2）点击左侧开发 ->开发管理，查看个人的AppID，并生成个人的小程序秘小程序SAAS系统钥保存，这些在后续开发中都会用到

2、创建项目并熟悉布局

1）登录开发者工具，创建一个小程序入门项目，如下

2）点击确定，创建好后先来看一下项目整体布局

1、模拟器：开发阶段能看出来在手机上显示的效果

2、编辑小程序SAAS系统器：点击左侧代码文件，对我们的代码进行编辑

3、调试器：调试小程序，如发送请求，服务端响应数据等，类似于浏览器调试工具

3）在开发前，点击详情 ->本地设置，勾选上(不校验合法域名、web-view (业小程序SAAS系统务域名)、TLS版本以及 HTTPS证书)，方便我们在开发阶段能成功发送出去请求。

二、开发入门案例

1、小程序目录结构

小程序包含一个描述整体程序的app和多个描述各自页面的page。一个小程序主体部分由小程序SAAS系统三个文件组成，必须放在项目的根目录，如下

一个小程序页面由四个文件组成，如下

2、简单案例开发

1）实现功能及截图

实现如获取微信用户的头像和昵称，获取用户登录的授权码，以及在小程序中发送异步请求小程序SAAS系统a中的Ajax请求）等功能，部分截图如下

注：在点击获取用户信息没有弹窗，出现报错的，可能是基础库版本太高，可以选择低版本的基础库(如我选择的是2.15.0版本的)。在右上角详情 ->本地设置 ->调试小程序SAAS系统基础库那里可以选择版本

2）完整视频演示

关闭

观看更多

退出全屏

视频加载失败，请刷新页面再试

刷新

视频详情

3、代码整理

页面核心代码文件 index.wxml和 index.js如下

1）index.wxml小程序SAAS系统

< title="码农后端" back="{{false}}" color="black" background="#FFF"></小程序SAAS系统ion-bar><scroll-view class="scrollarea" scroll-y type="list"> <view class="container"> <view>

</view小程序SAAS系统> <view> <button bindtap= "getUserInfo" type="primary">获取用户信息</button>

昵称：{{nickName}}

授权码：{{code}}

</view> <view> <button bindtap= "sendRequest" type="default">发送请求</button> </view> </view>小程序SAAS系统</scroll-view>

2）index.js

// index.js

Page({

data

msg:

nickName

: ,

url

: ,

code

// 小程序SAAS系统获取微信用户的头像和昵称

getUserInfo(){

wx.getUserProfile({

desc: 获取用户信息

success: (res) =>

{

console

.log(res.userInfo)

/小程序SAAS系统/ 为数据赋值 this

.setData({

nickName

: res.userInfo.nickName,

url

})

}

})

// 微信登录，获取用户的小程序SAAS系统授权码

wxLogin(){

wx.login({

success: (res) =>

{

console

.log(res.code)

this

.setData({

code

: res.code

})

// 小程序SAAS系统发送请求

sendRequest(){

wx.request({

url: http://localhost:8080/user/shop/status

method: GET

success: (res)=>

{小程序SAAS系统

console

.log(res.data)

}

})

}

})

4、简单总结

当然，这只是一个很小很小的案例，实际的开发过程远比上述复杂。整体来说，小程序的开发其实就是前端开发，编写js也好，设置wxml页面布局小程序SAAS系统(类似前端html)、wxss页面样式(类似前端css)也好，这些都与前端密不可分。编写index.wxml与index.js文件，整体的代码风格和Vue十分相像，刚一上手就是那种陌生又熟悉的感觉哈哈小程序SAAS系统。