微信小程序开发初体验

为什么使用微信小程序

微信装机量很高,用户众多,小程序无需下载5、开发成本低、维护简便
一般app需要至少安卓+IOS两个,app开发成本较高,特别是IOS.其实除了小程序还有内嵌H5\H5+之类的app也可以选择,但是H5无法使用native方法,一些特殊的sdk,而小程序可以通过微信和native交互,甚至小程序的设计和文档中甚至将微信作为native,直接面对微信开发其实也是不错的
我们已有一个安卓app,因为有一部分语音识别,语音转换,静默检测是必须使用native,所以我们使用的是native+H5混合开发的方式实现的.由于反响不错,领导层决定开发IOS也可以使用的APP,最终我们选择了微信小程序.

文档

微信小程序文档首页:https://developers.weixin.qq.com/miniprogram/dev/framework/
其实我文档只看了 开发>指南>起步,以及开发>指南>框架相关的一些知识就开始了
简单总结一下小程序的代码构成;
JSON:静态配置,其中app.json,project.config.json配置了整个项目的一些配置,特殊的是微信小程序的json的key必须有双引号,没有引号或者单引号是常见的错误,且json文件不能写注释
WXML:类似HTML,没有详细的看,不过支持类似vue的插值和绑定,其中点击事件的绑定方式是bindtap=functionName没有functionName 没有小括号,js的方法带不带括号我一直分的不很清楚,需要进一步学习了解一下
WXSS:类似CSS,没有详细看,不过有微信的官方UI框架WeUI,网址weui.io,应该问题不大
JS:逻辑交互

开发中遇到的问题和笔记

全局变量存在哪里

第一个遇到的问题是全局的变量,主要是服务器的路径,之前的js都使用common.js,所有的页面都对他进行引用.
小程序里面可以选择两种方式,
1,保存在app.json中,app.json中有
2.类似common.js

var SERVER_URL = "http://2396c8l486.wicp.vip/api/";
module.exports.SERVER_URL = SERVER_URL;

页面js中使用

var COMMON = require("../../../js/common.js");
var serverUrl = COMMON.SERVER_URL;

特别的是,require不支持绝对路径

常用的插值和状态管理

小程序的框架也是用到了这个思路，如果你需要把一个 Hello World 的字符串显示在界面上。
WXML 是这么写 :
{{msg}}
JS 只需要管理状态即可:
this.setData({ msg: “Hello World” })

bindtap等绑定方法传参数

dataset
在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。
在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：
data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。
示例：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})

页面参数

点击事件通过data-*获取参数,url拼接,wx.navigateTo({}),目标页面的onLoad函数可以接受到参数

页面1
wxml

<view wx:for="{{questionList}}" bindtap='goQuestion' data-question-id="{{item.id}}">{{item.title}}</view>

js

goQuestion: function (options){
    console.log(options)
    var questionId = options.currentTarget.dataset.questionId;
    console.log(questionId)
    wx.navigateTo({
      url: '/pages/textExercise/question/question?questionId=' + questionId,
    })
  }

页面2
js

onLoad: function (options) {
    console.log(options);
    console.log(options.questionId);
    
   }