微信小程序进阶

    技术2024-07-26  14

    微信小程序和微信公众号不能同时用一个账号。     一个微信公众号可以关联多个小程序。

    公众号账号是 992114043@qq.com

    登录地址  可用账号和扫码登录  https://mp.weixin.qq.com/

     

    小程序的账号是 893103453@qq.com         只能用此账号登录小程序进行 发版 查看

    登录地址  只能用账号登录  https://mp.weixin.qq.com/

     

    小程序官方详细文档:https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

     

    小图标地址:https://www.iconfont.cn/collections/detail?cid=29

     

    1.git版本管理

        a.登录代码管理, 新建一个项目。:https://git.weixin.qq.com/users/authorize#wechat_redirect

        b.微信开发者工具,版本管理

        设置选项,

        设置远程: 添加远程仓库。

        设置网络和认证:网络代理设置-自动   

                                     认证方式-使用用户名和密码(即注册时候的账号和密码)

                                      

       c.开发者工具中,右键远程:添加远程仓库即可。

                                                      

    2.wxml文件的使用

        wxml文件的标签使用语法文档:  https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

        参考文档:https://www.cnblogs.com/echolun/p/11094605.html

        {{}}   表达式来绑定解析JS文件中定义的变量

     {{}}中除了单纯的解析变量,还能做简单的逻辑运算

        a.算术计算

            <text>{{num1+num2}}</text>

        b.字符串拼接

            <text>{{"听风是风"+str}}</text>

        c.三元表达式

            <text>{{userName?userName:'登录'}}</text>

        d.条件逻辑

            <text wx:if="{{bool}}">我叫听风是风</text>

        e.特殊组件

            <block wx:if="{{bool}}">

                <text>我叫听风是风,</text>

            </block>

            block : block本身不会被渲染,只起到容器的作用,比如当bool为true可以看到wxml中并没有渲染block组件

            <view wx:for="{{array}}" wx:for-index="index" wx:for-item="item">

                第{{index}}个元素是: {{item}}

            </view>

     

        <view> {{message}} </view>        相当于div标签

        <text>深山夕照深秋雨。</text>    相当于span标签

        <image bindload='imgLoad' src='https://d.jpg'></image>    相当于img标签   

        bindload图片加载完成后执行的函数。  lazy-load  懒加载函数

        <button bindtap="alert">bindtap</button>    <button bind:tap="alert">bindtap</button>

        bindtap   bind:tap  相当于点击事件

                 

        

    3.js文件的使用

        js文件用来处理业务逻辑绑定数据各种事件。

                

        a.绑定数据

        在js文件中,所有的数据处理都放在page属性中。

        其中data属性存放所有静态数据,在wxml中通过{{name}}即可获取到。

            

        b.函数事件

        函数与data属性同级,放在page属性中。

        c.赋值

        通过接口请求回数据赋值给页面,注意在函数中,要用 var that = this;接一下系统中的this对象

        d.小程序的生命周期

        App()函数用来注册一个小程序。接受一个object参数,其指定小程序的生命周期函数等。

      onLoad: 页面加载        一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。onShow: 页面显示        每次打开页面都会调用一次。  在此处调用获取页面的数据接口。 onReady: 页面初次渲染完成        一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。                                                 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期 onHide: 页面隐藏              当navigateTo或底部tab切换时调用。 onUnload: 页面卸载          当redirectTo或navigateBack的时候调用。

    4..json文件的使用

        静态数据配置文件。

    5.app.json

        {   "pages":[ //页面数组     "pages/index/index",     "pages/logs/logs"   ],   "window":{     "backgroundTextStyle":"light", //背景文本样式 可选light dark     "navigationBarBackgroundColor": "#fff", //导航背景色,可定义任意颜色     "navigationBarTitleText": "WeChat", //导航标题,可定义任意文本     "navigationBarTextStyle":"black" //导航文本颜色,可选black white   } }

        a.pages

        pages 配置所有页面路径(如果删除某条路径,同步删除掉对应的页面文件,增加页面也是如此)。

        新增页面推荐做法是直接在pages数组中新增一条页面路径,保存后pages文件夹会自动生成一个新的页面

        b.windows

        windows配置所有页面的顶部背景颜色文字颜色标题等,这是全局的配置,所有页面都会生效。

        我们可以在单个页面json配置中定义独特的风格用于覆盖全局配置,

        c.注意

        json文件都是被包裹在{}中,并以key-value方式展示。注意,key只能加上双引号,没加双引号,或者加了单引号都会报错。

        json文件中无法使用注释,添加任意注释都会引发报错。

     

    6.设置底部导航栏

        在app.json 文件中添加  tabBar  属性即可。

    "tabBar": {

        "color": "#a9b7b7",

        "selectedColor": "#11cd6e",

        "borderStyle": "white",

        "list": [

          {

            "pagePath": "pages/index/index",

            "text": "首页",

            "iconPath": "images/index.png",

            "selectedIconPath": "images/indexselected.png"

          },

          {

            "pagePath": "pages/user/user",

            "text": "用户",

            "iconPath": "images/user.png",

            "selectedIconPath": "images/userselected.png"

          }

        ]

      }

    7.接口请求

        本地测试请求,可以取消合法域名和https验证

        

        a.

     

    Processed: 0.012, SQL: 9