微信小程序开发完整流程

一生痴爱美景 發表於 2020-2-25 10:48:00

<h3>1. 注册小程序账号</h3>
1. 打开微信公众平台，找到注册入口
2.选择账号类型：小程序
 <img src="https://img2018.cnblogs.com/i-beta/893654/202002/893654-20200223230206022-1894314358.png">
3. 填写注册信息-激活
4. 获取AppID，查看位置（小程序后台->开发）
<h3> 2. 下载微信小程序开发工具 </h3>
下载地址
如果想要使用VSCode编写小程序的代码，需要安装“小程序助手”插件
<h3>3. 开发流程</h3>
<h4>1. 目录结构</h4>
<h4><img src="https://img2018.cnblogs.com/i-beta/893654/202002/893654-20200224010214028-251143601.png"></h4>
 
.wxml - weixin Markup Language；在.wxml中编写页面结构
<view></view>用于包含代码块
<text></text>包含的文字可以长按选中
<h4>2. 判断是否授权</h4>
<div class="cnblogs_code">
<pre>App({
// 判断是否授权
 wx.getSetting({
 success: res => {
 if (res.authSetting['scope.userInfo']) {
 // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
 wx.getUserInfo({
 success: res => {
 // 可以将 res 发送给后台解码出 unionId
 this.globalData.userInfo = res.userInfo

 // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
 // 所以此处加入 callback 以防止这种情况
 if (this.userInfoReadyCallback) {
 this.userInfoReadyCallback(res)
 }
 }
 })
 }
 }
})
},
globalData: {
userInfo: null
}
})</pre>
</div>
<h4>3. 获取用户授权</h4>
1. 通过授权按钮申请用户授权
<div class="cnblogs_code">
<pre>
<view class="container">
<view class="userinfo">

<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权</button>

<block wx:else>
 <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
 <text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
</view></pre>
</div>
2. 设置数据初始值
<div class="cnblogs_code">
<pre>Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
}
})</pre>
</div>
3. 获取授权后给数据赋值
<div class="cnblogs_code">
<pre>getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
 userInfo: e.detail.userInfo,
 hasUserInfo: true
})
}</pre>
</div>
4. 获取用户信息；兼容没有open-type="getUserInfo"的版本
<div class="cnblogs_code">
<pre>Page({
onLoad: function () {
if (app.globalData.userInfo) {
 this.setData({
 userInfo: app.globalData.userInfo,
 hasUserInfo: true
 })
} else if (this.data.canIUse){
 // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
 // 所以此处加入 callback 以防止这种情况
 app.userInfoReadyCallback = res => {
 this.setData({
 userInfo: res.userInfo,
 hasUserInfo: true
 })
 }
} else {
 // 在没有 open-type=getUserInfo 版本的兼容处理
 wx.getUserInfo({
 success: res => {
 app.globalData.userInfo = res.userInfo
 this.setData({
 userInfo: res.userInfo,
 hasUserInfo: true
 })
 }
 })
}
},
})</pre>
</div>
<h3>4. 小程序语法</h3>
<h4>1. 条件渲染和block组件</h4>
block标签相当于ReactJS中的空标签（<></>）,不会改变原有的代码结构。
block标签常和if/for联合使用。
示例：
<div class="cnblogs_code">
<pre> <button wx:if="{{1!==1}}">1</button>

<block wx:elif="{{1!==1}}">
 <text>2</text>
</block>
<text wx:else>3</text></pre>
</div>
<h4>2. 事件绑定</h4>
<img src="https://img2018.cnblogs.com/i-beta/893654/202002/893654-20200224161624541-2105170206.png">
<div class="cnblogs_code">
<pre>onTapOut(event) {
console.log('--out--',event.target.id, '---dataset--',event.target.dataset);
console.log('--out--',event.currentTarget.id, '---dataset--',event.currentTarget.dataset);
},
onTapIn(event) {
console.log('--in--', event.target.id)
console.log('--in--', event.currentTarget.id)
},</pre>
</div>
1. bind+事件名：不阻止事件冒泡
<div class="cnblogs_code">
<pre><view data-out="1" id="out" class="test" bindtap="onTapOut">
<view data-in="2" id="in" bindtap="onTapIn">Inner View</view>Outer View
</view></pre>
</div>
1) 单击Inner View
<div class="cnblogs_code">
<pre>--in--in
--in--in
--out-- in --dataset-- {in: "2"}
--out-- out --dataset-- {out: "1"}</pre>
</div>
2) 单击Outer View
<div class="cnblogs_code">
<pre>--out--out
--out--out</pre>
</div>
2. catch+事件名：阻止事件冒泡
<div class="cnblogs_code">
<pre><view id="out" class="test" bindtap="onTapOut">
<view id="in" catchtap="onTapIn">Inner View</view>Outer View
</view></pre>
</div>
1)单击Inner View
<div class="cnblogs_code">
<pre>--in--in
--in--in</pre>
</div>
2)单击Outer View
<div class="cnblogs_code">
<pre>--out--out
--out--out</pre>
</div>
<h4>3. 设置tabBar</h4>
在app.json中设置tabBar
<div class="cnblogs_code">
<pre>"tabBar": {
"color": "#aaa", // tabBar默认字体颜色
"selectedColor": "#333", // 字体选中颜色
"backgroundColor": "#fff", // 背景颜色
"borderStyle": "black", // 切换边框颜色；white/black
"position": "top", // tabBar所处的位置；top/bottom
"list": [{// 2-5个
 "pagePath": "pages/index/index",
 "text": "首页"
}, {
 "pagePath": "pages/logs/logs",
 "text":"日志"
}]
},</pre>
</div>
<h4>4. 设置导航样式</h4>
<div class="cnblogs_code">
<pre>// app.json中设置
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
// window下的属性，可以在具体页面中覆盖
// 如：index.json中
{
"navigationBarTitleText": "首页"
}</pre>
</div>
<h4>5. 轮播图</h4>
<div class="cnblogs_code">
<pre><swiper id="swiper">
<swiper-item>
 <image src="/images/1.jpg"></image>
</swiper-item>
<swiper-item>
 <image src="/images/2.jpg"></image>
</swiper-item>
</swiper></pre>
</div>
<h4>6. 渲染列表</h4>
<div class="cnblogs_code">
<pre> 
<block wx:key="*this" wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block></pre>
</div>
<h4>7. 页面跳转</h4>
<div class="cnblogs_code">
<pre> // 跳转后左上角带有返回按钮
 wx.navigateTo({
 url: '../logs/logs'
})
// 跳转后左上角是首页按钮
 wx.redirectTo({
 url: '../logs/logs',
})
// 跳转到tabBar的页面
 wx.switchTab({
 url: '../logs/logs',
})</pre>
</div>
<h4>8. 页面生命周期</h4>
<div class="cnblogs_code">
<pre>onLoad(options) { // 页面首次加载触发(只一次)；可以接收页面跳转时携带的查询参数
}
onReady() { // 页面首次加载时触发（只一次）
}
onShow() {
//每次显示该页面触发
}
onHide() {
// 每次隐藏的时候触发
}
onPullDownRefresh() {
// 监听用户下拉事件
}
onReachBottom() {
// 监听上拉触底事件
}
// 设置该函数后，该页面存在分享功能
onShareAppMessage() {
// 设置分享的具体信息
return {
title: "分享信息",
imageUrl: '',
path: ''
}
}</pre>
</div>
<h3>4. 高级用法</h3>
<h4>1. wx.request的promise封装</h4>
<div class="cnblogs_code">
<pre>import BASE_URL from './config.js';
export default function request(url, data, header, method) {
return new Promise((resolve, reject) => {
wx.request({
 url: BASE_URL + url,
 data,
 header,
 method,
 dataType: 'json',
 responseType: 'text',
 success: function(res) {
 console.log(res);
 if (res) {
 resolve(res.data)
 // 还需进行详细的状态码区分
 }
 },
 fail: function(res) {
 reject(res);
 // 请求接口失败，一般是网络异常等；404/500都是success回调返回的状态码
 },
 complete: function(res) {
 // 无论成功失败都会触发
 },
})
});
}</pre>
</div>
<h4>2. webView组件</h4>
<div class="cnblogs_code">
<pre><web-view src="{{h5Src}}"></web-view></pre>
</div>
<div class="cnblogs_code">
<pre>Page({
data: {
h5Src: ""
},
onLoad(options) {
const { url } = options;
this.setData({
 h5Src: decodeURIComponent(url)
})
}
})</pre>
</div>
跳转函数
<div class="cnblogs_code">
<pre>toView() {
let url = "https://v.youku.com/v_show";
wx.navigateTo({
 url: '/pages/webView/webView?url=' + encodeURIComponent(url),
})
},</pre>
</div>
<h4>3. 选择通信地址</h4>
<div class="cnblogs_code">
<pre> // 选择通信地址
 wx.chooseAddress({
 success(res) {
 console.log(res)
 }
})</pre>
</div>
<h4>4. 选择/获取定位</h4>
<div class="cnblogs_code">
<pre>onChooseLocation() {
// 弹出地图选择当前所在的位置
 wx.chooseLocation({
 success: function(res) {
 },
})
},
onGetLocation() {
// 获取位置坐标信息
 wx.getLocation({
 success: function(res) {
 console.log(res)
 // 在地图中定位当前位置
 wx.openLocation({
 latitude: res.latitude,
 longitude: res.longitude,
 })
 },
})
},</pre>
</div>
  
来源：https://www.cnblogs.com/lyraLee/p/12355352.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发完整流程