小白学微信小程序

2022-09-28 14:25:10

奔着实用性的目的-测试孩子的认字量，开发了一个微信小程序-测字大王。上下班路上看书看了一个星期，代码前后共写一个星期。现在小程序已经对外开放，share下我的开发过程吧。

一工具准备

首先先过一篇微信开放文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

然后安装微信开发者工具

这个简单，百度一堆安装流程可供参考。

但是在登陆微信开发者工具时碰到小问题，总是提示：系统代理不是安全，怎么也消不掉, 这个不是所有人都能碰到，win10就没有碰到，自己家的系统win7有碰到，解决办法见https://www.cnblogs.com/Sunshine106/p/11181602.html

二申请账号

按照微信开放文档的流程申请，没有公众号的可以申请个人

三开始写代码

最后的代码结构见：

index目录是默认的，新加目录或页面都要加到 app.json

最后来几个页面效果：

重点来说说开发中遇到的难题：

1）点读需求

朋友都说需要不认识的时候能点一下字能告诉小朋友发音，在网上搜了很久都没有搜到，有个人说可以通过有道，百度的接口，但是我没有找到。后面找到发现微信小程序已经提供了插件WechatSI：于是果断试用：

var plugin = requirePlugin("WechatSI")

var innerAudioContext = wx.createInnerAudioContext();
innerAudioContext.onError((res) => {
  // 播放音频失败的回调
})


function playTTS(text) {
  //need to add WXAPP plug-in unit: WechatSI
  plugin.textToSpeech({
    lang: "zh_CN",
    tts: true,
    content: text,
    success: function (res) {
      console.log("succ tts", res.filename)
      innerAudioContext.src = res.filename;
      innerAudioContext.play()
    },
    fail: function (res) {
      console.log("fail tts", res)
    }
  })
}

function stopTTS() {
  innerAudioContext.stop();
}

确实能用，就是点击发的声音不太好听，如果是童声或者林志玲声音就更好了。

2）互动性增强

有朋友提出小朋友认出字后如果能奖励星星就好了，娃娃们对奖励星星贴纸真是无法抵触诱惑啊，动态给出那种炫的效果也打不到，最后根据分数实时算出应该画出几个星星，星星图片是自己从excel里画的，这时候用到了微信小程序稍微高级一点的用法-模板

stars-template.wxml

<template name="starsTemplate">
 <view class='stars-container'>
  <view class='stars'>
  <block wx:for="{{stars}}" wx:for-item="i" wx:key="position">
   <image wx:if="{{i}}" src='../images/icon/star.png'></image>
    <!-- <image wx:elif="{{i==2}}" src='/images/icon/none-star.png'></image> -->
    <image wx:else src='../images/icon/none-star.jpg'></image>
  </block>
  </view>
  <text class='star-score'>{{score}}</text>
 </view>
</template>

recognize.wxml

<import src="../stars/stars-template.wxml" />
 <view wx:if="{{endWord}}"> 
    <view class="header-view">
        <text class="header">四五快读第 {{levelId}} 册,第{{lessonId}}课 </text>
    </view>
    <view class="body-view">
        <text class="line">____________________________________________ </text>
    </view>
    <view class="body-view">
        <text class="score"> {{score}}分</text>
    </view>
    <view style='margin:100rpx'>
        <template is="starsTemplate" data="{{stars:stars}}" />
    </view>
    <view class="body-view">
          <text class="total"> 太棒了, 只花了 {{totalTime}}，已认{{right}}字               </text>
    </view>
</view>

所有源码见：

https://gitee.com/lishxia106/cezidaiwang

我知道这个小程序做的功能还不完善，希望有机会在后面能更入更多的时间，能真正实用。

码农公寓

相关文章