小程序开发攻略

前言

近期了解了公众号，公众号可以设置关联小程序跳转，因此我编写了一个简单的小程序，做一个简单的攻略笔记。

包括设置与使用数据的方法、小程序绑定事件传参的方法，小程序异步请求方法及注意事项，公众号自定义菜单绑定小程序路径内容介绍。

微信开发者工具

下载链接：微信开发者工具。

创建小程序

1. 个人名义创建小程序必须要邮箱，一个邮箱只能绑定一个公众号或者一个小程序，挺麻烦的，因此可能需要准备很多个邮箱。
2. 进入微信公众平台以未绑定邮箱注册一个小程序，获得小程序id。
3. 打开微信开发者工具，创建项目，输入对应id，模板我选择的是js基础模板。
   

基础页面

页面组成

1. 页面在pages中，一个页面有四部分组成。
2. .wxml与html相仿，但是标签用法存在不同。
3. .wcss就是普通的css写法，可以添加类，在wxml中使用。
4. .json是一些配置信息，比如"navigationBarTitleText"可以配置小程序上方显示的页面名称。
5. .js就是脚本代码，生命周期在基础模板中都有，常用的onLoad可以在进入页面加载时执行。
   

创建页面

1. 可以在pages中新建一个文件夹，名字起为页面名。
2. 右击文件夹，新建page。
   
3. 注意删除页面时，要记得去根目录的app.json中pages属性把对应的页面路径删除。
   

数据的设置与使用

从js到wxml

1. 数据的处理一般在js文件中，js是一个Page包裹着一个对象，数据状态data有点类似react的state，对象属性data中可以设置初始值，同时生命周期也在该对象中。
   

2. 设置data默认值使用this.setData，也类似react中的this.setState。

     this.setData({ show: true })
   

3. 页面获取时使用{{}}中间的值就可以识别data中的变量，用法非常丰富，总结起来就是可以当成字符串在你任何想要的地方使用

   • 可以直接在文本使用

     <view>
        注意信息时效性！更新于{{result.updatetime}}
     </view>
     

   • 可以在元素样式中使用

     <view style="color: {{type===item.value?'red':''}};">
          
     </view>
     

   • 可以在元素属性中使用

     <image src="{{ result.photo }}"/>
     

从wxml到js

1. 页面与脚本交互，小程序的点击事件是bindtap，后面绑定方法名，方法名在js文件设置，与data属性同级。
   

2. 小程序绑定方法名时不能直接传递参数，必须要通过设置属性比如data-xxx。

   //错误
   <view bindtap="changeType({{item.value}})"></view>
   //正确
   <view bindtap="changeType" data-value="{{item.value}}"></view>
   

3. 获取参数时，可以通过event.currentTarget.dataset.xxx获取，xxx与设置属性时对应。

   changeType: function (event) {
    this.setData({ type: event.currentTarget.dataset.value }) 
   }
   

数据请求

1. 微信小程序请求不支持fetch，可以使用wx.request，比如在onLoad中加载初始数据。
2. 因为回调中无法正确识别this指向，因此我们得在内部声明一下_this，当然也可以使用箭头函数解决。

   onLoad: function () {
     const _this = this
     wx.request({
       url: 'https://xxxx.com/xxxx',
       method: 'GET',
       data: {},
       success: function success(res) {
         _this.setData({ data: res.data })
       },
       fail: function fail() {
   
       },
       complete: function complete() {
       }
     });
   },
   

3. 注意，请求的必须是域名且是备案过的，否则上线的小程序是用不了的，我们还需要在小程序开发管理-开发设置-服务器域名中设置request白名单。
   

图片长按扫码事件

image标签加上属性show-menu-by-longpress

<image src="./xx.png" show-menu-by-longpress></image>

设置允许分享（默认是不允许分享的）

在 app.ts 加入这一句

wx.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] })

自定义函数

因为一些函数在{{}}中无法调用，会报错，所以我们可能需要创造自定义函数依赖

在页面目录创建index.wxs文件。

比如我创建一个隐藏手机号码中间四位的方法。

var func = {
    hideNumber: function (value) {
        var res = value.substring(0, 3) + '****' + value.substring(7, 11)
        return res
    }
}
// 导出对外暴露的属性
module.exports = {
    hideNumber: func.hideNumber
}

然后在wxml文件中引入

<!-- 引入.wxs文件 src为相对路径，module指定当前模块的名称 -->
<wxs module="func" src="./index.wxs"></wxs>

<!-- 即可使用 -->
<view>{{func.hideNumber(number)}}</view>

公众号自定义菜单绑定小程序

1. 绑定时需要一个备用图文，发表一下即可。
2. 另外注意，配置的路径为小程序页面路径，比如pages/index/index