微信小程序开发
2019-07-14 本文已影响0人
光头小青蛙
1.开发前准备
- 开发微信小程序首先要注册一个账号（[https://mp.weixin.qq.com/wxopen/waregister?action=step1](https://mp.weixin.qq.com/wxopen/waregister?action=step1 注册地址）。
注册完成之后登陆进管理后台，可以看到里面的一些功能设置。
image.png
-
开发一个小程序需要一个appId，这个appId在开发中的开发设置中可以找到。
image.png
- 然后开始下载微信的开发者工具，下载地址（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
）下载完成后安装，打开开发者工具（需要微信扫描登陆），选择小程序，设置小程序的名称，项目目录，appid，也可以选择云开发，点击创建就生成了一个小程序项目。
2. 目录文件介绍
-
小程序的初始项目目录。
image.png
-
pages是所有的页面组件目录，里面包含的每一个页面都有四个文件js（页面逻辑代码），json（页面属性配置），wxml（html代码），wxss（css样式）。 -
utils是一个存放公共js方法的目录。 -
app.js是全局js逻辑文件，在任何独立页面的js文件都能访问app.js里面方法。 - 在app.json中进行全局的配置，例如导航栏的文字颜色，背景颜色，标题，tabbar的设置，都通过app.json进行配置。
-
app.wxcss全局的css样式设置。
3.app.json常用配置
详细配置参考（https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html）
-
全局配置
-
pages用来配置页面路径信息，不需要写后缀名
{
"pages": ["pages/index/index", "pages/logs/logs"]
}
-
window用来配置小程序导航栏和状态栏窗口背景色等。
"window": {
"backgroundTextStyle": "light",//下拉 loading文字 的样式，light/dark
"navigationBarTextStyle":"white",//导航栏标题颜色，仅支持 black / white
"navigationBarBackgroundColor": "#000",//导航栏背景色支持16进制颜色
"navigationBarTitleText": "today",//导航栏标题内容
"backgroundColor":"#000000",//下拉loading背景色
"enablePullDownRefresh":true,//是否开启下拉刷新
"onReachBottomDistance":50,//下拉刷新的距离
"pageOrientation":"portrait"//屏幕旋转配置
},
-
tabBar配置底部tab导航栏
"tabBar":{
"color":"#333",//字体颜色
"selectedColor":"#3D74DD",//菜单选中字体颜色
"backgroundColor":"#ececec",//导航栏背景颜色
"borderStyle":"black",//border颜色只有black和white
"position":"bottom",//位置
"custom":false,//自定义tabBar默认false
"list":[//tab数组最少两个，最多5个
{
"pagePath":"pages/index/index",//跳转页面路径
"text":"home",//tab标题
"iconPath":"assets/images/home.png",//tab默认icon路径
"selectedIconPath":"assets/images/homed.png"//tab选中icon路径
},{
"pagePath":"pages/search/search",
"text":"search",
"iconPath":"assets/images/search.png",
"selectedIconPath":"assets/images/searched.png"
}
]
}
}
-
networkTimeout各类网络请求超时时间默认是60000毫秒
"networkTimeout":{
"request":3000,//网络请求
"connectSocket":3000,//socket请求
"uploadFile":3000,//文件上传
"downloadFile":3000//文件下载
}
-
debug开始debug模式方便用于调试，会将页面注册，页面路由数据更新打印出来。
image.png
"debug":true
-
usingComponents声明自定义组件为全局自定义组件或者第三方组件。
{
"usingComponents": {
"van-button": "vant-weapp/button"
}
}
-
permission小程序接口权限设置
详细参考（https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html）
{
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
}
}
}
-
页面配置
- 每个单独的页面都会有四个文件
.wxml，.wxss，.json，.js，页面单独配置需要在json文件中配置，和app.json的区别就是一个是总的设置，一个是局部单独的设置。配置选项和app.json全局配置一样。
4.页面生命周期函数
- 每个页面都会有一个生命的周期从加载显示到隐藏销毁一个完整的流程，这些生命周期都包含在
page（{}），里面，包括每个页面的data（类似于vue里面data）也包含在`page（{}）里面。
新建的page页面在
js文件中一定要加上page（{}）否则会报错。
image.png
-
data页面所有的动态数据绑定都来自于data，类似于vue的data。 -
onLoad，页面加载时触发，只触发一次，类似于vue的created。 -
onShow页面显示时触发。 -
onReady页面渲染完成时触发。类似于vue的mounted。 -
onHide页面隐藏或者切换到后台是触发。 -
onUnload页面卸载时触发，类似于vue的destoyed。
Page({
data:{
value:'today'
},
onLoad(){
console.log("初始化")
},
onReady(){
console.log("准备好了")
},
onShow(){
console.log('显示')
},
onHide(){
console.log("隐藏")
},
onUnload(){
console.log("页面卸载")
},
})
5.页面事件处理函数
- 页面处理函数，是用户在当前页面的行为触发的，例如下拉刷新，滑动，分享，旋转
-
onPullDownRefresh监听用户下拉刷新函数，前提是需要在app.json中开启下拉刷新。 -
onReachBottom监听用户上拉触底事件。 -
onPageScroll监听用户滑动页面事件。 -
onShareAppMessage监听用户点击转发按钮 -
onResize页面尺寸改变触发。 -
onTabltemTap当前页面是tab页时，点击tab触发。
Page({
onPullDownRefresh(){
console.log("下拉刷新")
},
onReachBottom(){
console.log("触底")
},
onPageScroll(){
console.log("页面滚动")
},
onShareAppMessage(){
console.log("分享")
},
onResize(){
console.log("页面尺寸改变")
},
onTabltemTap(){
console.log("点击Tab")
}
})
6.组件事件处理函数
-
page里面可以定义组件事件处理函数，通过bindtap绑定在page中定义的函数，点击的时候会触发。
<view bindtap="begin">点击</view>
Page({
data:{
value:"taoday"
},
begin(){
console.log(this.data.value)
}
})
7.小程序的生命周期
- 小程序的生命周期是在
app.js文件中定义的，在app.js中周期函数都包括在App（{}）里面，这点是和页面周期函数有区别，app（{}）只能在app.js中调用，必须且只调用一次。 -
onLaunch监听小程序初始化。 -
onShow监听小程序启动或者切换到前台。 -
onHide监听小程序切换到后台。 -
onError监听错误函数。 -
onPageNotFound监听页面不存在函数。
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
})
8.小程序常用语法
- 小程序的语法和
vue语法差不多，只是在局部会有一些差异，会vue那小程序的语法理解就方便很多了。 - 数据绑定和
vue一样，在page的data设置好，在组件内通过双花括号{{}}包裹的形式调用，组件内使用data属性也要加双花括号。 -
wx:if条件渲染，类似于v-if。 -
wx:for列表渲染，类似于v-for，只不过不需要在设置渲染的index和item，默认的就是index，item。也可以通过wx:for-index来指定下标名称，wx:for-item指定item名称，同样也可以嵌套渲染。wx:key指定唯一标识符。
<view class="index-container">
<van-button type="primary" wx:for="{{array}}" wx:key="index">{{item.name}}</van-button>
<van-button wx:if="{{flag}}">{{flag}}</van-button>
</view>
Page({
data:{
value:'today',
flag:true,
array:[
{name:"1"},
{name:"1"},
{name:"1"}
]
}
})
9.使用第三方npm包
- 以有赞的
vant-weapui框架为例，首先在小程序项目的根目录下载npm包，然后npm init，必须npm init，否则组件库就不会初始化，在开发工具构建npm包的时候会报错。
npm i vant-weapp -S --production
npm init
-
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件，构建完之后会出现一个文件夹。
image.png
image.png
-
在构建
npm包的时候可能会有报错的情况，构建vant-weap就出现了一个错误，
VM6419:5 ./miniprogram_npm/_vant-weapp@0.5.12@vant-weapp/action-sheet/index.wxml
../wxs/utils.wxs not found from ./miniprogram_npm/_vant-weapp@0.5.12@vant-weapp/action-sheet/index.wxml
> 1 | <wxs src="../wxs/utils.wxs" module="utils" />
| ^
2 |
3 | <van-popup
4 | show="{{ show }}"
-
解决方案就是把
miniprogram_npm/vant-weapp里的组件文件夹都删除，之后再到https://github.com/youzan/vant-weapp下载一份vant， 将dist文件夹（vant-weapp-dev\vant-weapp-dev\dist）中的文件复制到miniprogram_npm/vant-weapp（即下载一份vant，之后替换掉项目中的文件）。 -
使用组件在
app.json或者每个单独页面的json文件配置。
{
"usingComponents": {
"van-button": "vant-weapp/button"
}
}
- 然后在页面使用就可以了
<van-button type="primary">按钮</van-button>
