九,微信小程序开发浅谈

  最近在帮朋友做一款微信小程序(后面统称为小程序),有简单的交互,以及分享和支付功能。下面就简单的对小程序开发做一个简单的介绍,希望可以帮助大家!!!

  当前的小程序我们是在windows系统里开发的,如果要在linux系统下开发,请参考linux环境系统下开发的具体文档(好像需要对开发工具做一些配置,下次为大家提供相关文档)。

  开发步骤:

  1:准备阶段:有基础的HTML和css以及js基础。

  2:项目建立:

    a:创建自己的项目,创建一个本地项目,开发过程中利用appID来同步到项目中。

    b:建立好的项目后,默认创建的项目中,我们会看到一些文件夹以及文件,各自的用处以及使用这里不做过多的详述,具体参考小程序的开发文档。这里需要注意的是,有一个utils文件夹,里面存放的都是项目开发中在自己编写的函数,使用时,只在使用界面加上 var util = require('../../utils/util.js')就可以使用了。

    c:在app.js中配置应用的声明周期,App()函数用来注册一个小程序,注意必须在app.js中注册,且不能注册多个。其中最基本的为onLaunch()。

  3:进阶阶段:

    a:因为我们的小程序需要与后台交互,所以对数据的请求就不可避免,wx.request({});微信自带的数据请求与提交方法,相当于js中的ajax。一般小程序的每个界面都有自己的交互,我们需要将数据请求放在onLoad()函数里,这里一般是当前界面的数据请求,例如一个排行榜界面,一开始界面加载完就需要数据添加,这里就需要将wx.request({});放在当前界面的onLoad()函数里,然后根据需要去解析后台返回的数据并将以展示。

    b:用户输入并将数据提交到服务器,一般需要form,textArea,input组件来组合完成。

    一般的WXML结构为:

      <form bindsubmit="formSubmit" bindreset="formReset">
        <!-- 内容输入 -->
        <view class="inputContent" style="color:white">
          <textarea placeholder="请输入内容" bindinput="bindTextAreaChange" value="{{info}}" name="textarea" maxlength="{{noteMaxLen}}" auto-focus auto-height />
          <input type="text" placeholder='请输入备注' name="specCode"></input>
        </view>     
        <view class="section btn-area">
          <button formType="submit" class="btn" style="color:green">提交</button>
          <button formType="reset" class="btn" style="color:red">清空</button>
        </view>
      </form>
    在JS文件中去在formSubmit({})函数里取到数据,一般使用e.detail.value,然后根据组件里定义的name来取值,如:e.detail.value.specCode。
    c:对于数据获取与提交的方式总结:
      <1>:接口地址url---对于请求的参数我们需要了解一下,url是开发者服务器的接口,其含义是开发者自己的服务器和调用第三方的服务器上面上的接口url。 
      <2>:请求参数data---data值就是使用wx.request时,url里面的参数,也就是问号后面的参数。具体的方式为:url:'http://www..../',

        data: {
          id: '2' ,
          name: 'lili'
        }
      <3>:请求的 header---格式为:
        header: {
          'content-type': 'application/json'
        }
      <4>:其余就是三个函数---success,fail,complete

      注意:

        data数据说明---最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String 。转换规则如下:

          对于 header['content-type'] 为 'application/json' 的数据,会对数据进行 JSON 序列化
          对于 header['content-type'] 为 'application/x-www-form-urlencoded' 的数据,会将数据转换成 query string

  4:支付功能(待续)

  5:分享功能(待续)

  以上就是简单的小程序开发步骤,对于支付与分享功能的开发,后续添加,希望可以帮助到大家。以上如果有错误和漏洞希望大家指出,共同进步!!!

    

  

上一篇:2021-10-24


下一篇:jQuery-上